有没有办法在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. 在页面完全呈现后加载脚本。

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

显然，您could not将远程脚本与webpack捆绑在一起：

  

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

     

使用javascript加载器，i。即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进入你的建筑管道，那它似乎是一种不错的方式。