有没有办法在Node/Webpack中预先准备外部JS工具

Is there a way to prepend external JS tools in Node/Webpack?

本文关键字：外部 工具 JS Node Webpack 有没有      更新时间：2023-09-26

我正在使用Vue.js构建我的前端应用程序，在那个页面上，我有（太多）Javascript外部资源：Google Analytics、Typekit、Google Charts、Intercom、Raven等。

有没有一种方法可以配置我的Webpack配置文件，并告诉它下载index.html中的链接（甚至可以在特定文件中添加URL），然后将这些链接附加到我生成的js中。

这里的目的是减少JS文件的负载，并避免出现问题（如未加载的库）。

谢谢你的帮助！

虽然这听起来像是一个简单的改进（请求更少-页面加载更快），但将所有脚本组合到一个包中通常不是一个好主意。

原因有很多：

  1. CDN速度很快。除非您的捆绑包也通过CDN提供服务，否则合并这些脚本会适得其反。

  2. 即使是最小的代码修复，您也必须强制客户端使缓存无效，然后再次下载整个捆绑包。

  3. 流行的脚本（如GA）可能已经被用户的浏览器缓存，所以根本不会下载。

  4. 第三方脚本倾向于a）被更新b）加载其他脚本。因此，如果你将这样一个脚本的一个特定版本捆绑在一起，它可能会在不久后崩溃。

可以做什么

这些脚本中的大多数对页面渲染并不重要，因此您可以使用

  1. 以非阻塞方式加载脚本
  2. 页面完全呈现后加载脚本

我理解后果，但我真的需要捆绑这些脚本

显然，您无法将远程脚本与webpack:捆绑在一起

webpack是一个模块打包程序，而不是javascript加载程序。它从本地磁盘打包文件，不从web加载文件（除了它自己的块）。

使用javascript加载程序，例如script.js.

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() {
    // ...
});

然而，您可以使用某种任务运行程序（如gullow或grunt）用外部脚本为捆绑包做准备。

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var request = require('request');
var merge = require('merge2');
var concat = require('gulp-concat');
var buffer = require('gulp-buffer');
gulp.task('js', function() {
  var jquery = request('http://code.jquery.com/jquery-latest.js').pipe(source('jquery.js'));
  var main = gulp.src('main.js');
  return merge(jquery, main)
    .pipe(buffer())
    .pipe(concat('concat.js'))
    .pipe(gulp.dest('dist'));
});

既然你可以将webpack集成到你的构建管道中，这似乎是一个不错的方法。

相关文章：