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

Question

我正在使用Vue.js构建我的前端应用程序,在该页面中,我有(太多)Javascript外部资源:Google Analytics,T​​ypekit,Google Charts,Intercom,Raven等.

有没有办法配置我的Webpack配置文件,并告诉它下载index.html中的链接(即使通过添加特定文件中的URL),然后将其附加到我生成的js.

这里的目的是减少JS文件的负载,并避免问题(如未加载的库).

谢谢您的帮助!

Answer 1

虽然听起来似乎是一种简单的改进(更少的请求 - >更快的页面加载),但将所有脚本组合成一个捆绑包通常不是一个好主意.

有很多原因:

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() {
    // ...
});

但是,您可以使用某种任务运行程序(如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 集成到您的构建管道中,因此它看起来像一个神仙的体面方法.