javascript - 有没有办法在 Node/Webpack 中添加外部 JS 工具？

Question

我正在使用 Vue.js 构建我的前端应用程序，并且在该页面中，我有(太多)Javascript 外部资源:Google Analytics、Typekit、Google Charts、Intercom、Raven 等。

有没有办法配置我的 Webpack 配置文件并告诉它下载 index.html 中的链接(甚至通过在特定文件中添加 url)，然后将这些链接附加到我生成的 js 中。

此处的目的是减少 JS 文件的负载，并避免出现问题(例如未加载的库)。

感谢您的帮助!

Answer 1

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

有很多原因:

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

2. 即使是最小的代码修复，您也必须强制客户端使缓存无效并重新下载整个包。

3. 流行的脚本(如 GA)可能已经被用户的浏览器缓存，因此根本不会下载它们。

4. 第三方脚本倾向于 a) 更新 b) 加载其他脚本。因此，如果您捆绑此类脚本的一个特定版本，它可能会在不久后损坏。

可以做什么

这些脚本中的大多数对于页面呈现并不重要，因此您可以

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

我明白后果，但我真的需要捆绑这些脚本!

显然，你 could not使用 webpack 捆绑远程脚本:

webpack is a module bundler not a javascript loader. It package files from local disk and don't load files from the web (except its own chunks).

Use a javascript loader, i. e. script.js.

var $script = require("scriptjs");

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

但是，您可以 prepend your bundle with external scripts使用某种任务运行程序，例如 gulp 或 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'));
});

因为你可以 integrate webpack 到您的构建管道中，这似乎是一个不错的方法。