有没有一种方法在Node/Webpack中预置外部JS工具？

Question

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

是否有一种方法可以配置我的Webpack配置文件并告诉它下载index.html中的链接（即使通过在特定文件中添加URL），然后将其附加到生成的js文件中。

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

谢谢您的帮助！

- Cyril N.

---

你是指想要内联来自CDN的脚本，还是仅本地已经通过<script>标签包含的脚本？ - nils

这些来自CDN，而不是本地。 - Cyril N.

我可能错了，但我认为大多数这些脚本需要在它们的原始位置执行（特别是Typekit），因此将它们包含在你的Webpack捆绑包中可能行不通。 - nils

我知道这对Stripe来说是这样的，但可能不适用于所有情况（例如Google Analytics等）。如果我能减少负载和加载错误，那就太好了。 - Cyril N.

我不确定将第三方脚本附加到您的捆绑包中是否是一个好主意，因为它会减慢您的应用程序代码。例如，像GA这样的脚本可以异步加载而不影响您的应用程序。 - Richard Scarrott

Answer 1

尽管听起来像是一个简单的改进（减少请求 -> 加快页面加载），但将您的所有脚本合并成一个包通常不是一个好主意。有很多原因：

1. CDN很快。除非您的捆绑包也通过CDN提供服务，否则合并这些脚本将是适得其反的。
2. 即使是最小的代码修复，您也必须强制客户端使缓存失效并重新下载整个捆绑包。
3. 已经由用户浏览器缓存的流行脚本（如GA）可能根本不会被下载。
4. 第三方脚本有倾向于a）更新b）加载其他脚本。因此，如果您捆绑了这样一个特定版本的脚本，它在那一刻之后就可能变得不可用。

可以做什么

这些脚本中的大部分对页面呈现并不关键，因此您可以：

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

我了解后果，但我真的需要捆绑那些脚本！

显然，你无法使用webpack捆绑远程脚本:

webpack是一个模块打包工具，而不是javascript加载器。它从本地磁盘打包文件，不会从网络加载文件（除了自己的代码块）。

请使用javascript加载器，例如script.js。

var $script = require("scriptjs");

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

然而，你可以使用一些任务运行器（如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'));
});

既然您可以将 webpack 集成 到您的构建流程中，这似乎是一个相当不错的方法。

- Роман Парадеев

---

我喜欢你的观点，尽管在我的情况下有些不正确，但它适用于一般情况。例如，在我的情况下，导致问题的库是我与之交互的库（Intercom，我从代码中发送请求），Raven（用于getsentry.com，当我的js加载时连接到它）。对于这两个库，我需要在我的脚本准备好之前就准备好它们，否则我会遇到错误（这就是情况），因此我的问题 :) - Cyril N.

但我同意，对于 GA、Typekit，你的答案非常适用 :) - Cyril N.

@CyrilN。我已经更新了答案，并提供了可行的解决方案。 - Роман Парадеев

流行的脚本（如GA）可能已经被用户的浏览器缓存，因此它们根本不会被下载。这是个好主意。我正想问是否可以通过webpack捆绑GA代码。 - Jason Kim