vue开发过程中保存一次就编译一次，如果能够减少编译时间，哪怕是一丁点也能节省不少时间，开发过程中自己写的源文件会频繁变动，而一些库文件我们是很少变动的，如果把这些库文件提取出来就能减小打包体积，加快编译速度。
方法一 externals
1、为什么要配置externals
*官方解释
webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。
意思就是如果引用了一个库但是又不想让webpack打包（减少打包时间）并且不影响我们在程序中以cmd、amd或者window/global全局等方式进行使用（一般都是以import方式使用），那就可以通过配置externals实现。
这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打包入bundle中，从而减少打包时间，但又不影响第三方库的运用。
2、externals支持模块上下文的方式
global - 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。
commonjs - 用户(consumer)应用程序可能使用 CommonJS 模块系统，因此外部 library 应该使用 CommonJS 模块系统，并且应该是一个 CommonJS 模块。
commonjs2 - 类似上面几行，但导出的是 module.exports.default。
amd - 类似上面几行，但使用 AMD 模块系统。
3、怎么运用externals（@vue/cli 4.5.13为例）
例如：在index.hhtml中引入cdn资源query
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
vue.config.js配置如下：
说明：关于externals的配置，不同版本的配置略有不同，请根据自己的项目略作变更
module.exports = {
chainWebpack: (config) => {
config.set('externals', {
jquery: 'jQuery',
})
},
}
这样的话在应用程序中依旧可以以import的方式（还支持其他方式）引用：
import $ from 'jquery';
这样不仅之前对第三方库的用法方式不变，还把第三方库剥离出webpack的打包中，从而加速webpack的打包速度。
4、打包结果对比
方法二-dll动态链表库
DllPlugin 结合 DllRefrencePlugin 插件的运用，对将要产出的bundle文件进行拆解打包，可以很彻底地加快webpack的打包速度，从而在开发过程中极大地缩减构建时间。
以下主要讲述在 @vue/cli 4.5.13 中利用 DllPlugin 来进行预编译。
1、安装相关插件
npm install add-asset-html-webpack-plugin --save -dev
2、写dll配置文件
3、生成dll命令
在 package.json 中加入如下命令
"scripts": {
"dll": "rm -rf dll/*;node ./node_modules/webpack/bin/webpack.js --config config/webpack.config.dll.js"
}
控制台运行
npm run dll
结果
npm run build命令发现打包后的bundle文件依然存在jquery.
4、忽略已编译文件
为了节约编译时间，需要告诉webpack哪些插件已经编译过了，减少webpack的编译时间，在项目根目录下找到 vue.config.js ( 没有则新建 )，配置如下:
结果对比：
使用 DllPlugin 和 DllRefrencePlugin 进行构建，可以缩减50%～70%的构建时间。
dist文件下多了一个dll.js文件
打包结果对比：时间缩短明显,
5、index.html 中加载生成的 dll 文件
经过上面的配置，公共库提取出来了，编译速度快了，但如果不引用生成的 dll 文件，网页是不能正常工作的。打开 public/index.html，插入 script 标签。
<script src="../dll/vendor/vender.5a12daf.dll.js"></scrip
到此公用库提取完成，但总觉得最后一部手工插入 script 不太优雅，下面介绍下如何自动引入生成的 dll 文件。
打开 vue.config.js 在 configureWebpack plugins 节点下，配置 add-asset-html-webpack-plugin
引入成功查看打包后的dist文件结果如下：
6、补充DllPlugin作用示意图：
7、dome实现中遇到的问题
之前在公司项目中已经应用，公司项目用的是vue/cli2.0，对应的html-webpack-plugin插件对应的版本也比较低。后来在自己写dome的时候自己电脑安装的脚手架版本也相对比较低，但是安装html-webpack-plugin版本比较高导致出现一些问题，比如说生成的dll没见找不到等等，最后也是把插件的版本进行了降级，所以开发应用中注意版本之间的匹配。
8、参考文档
https://www.jb51.net/article/155939.htm
https://www.cnblogs.com/lifefriend/p/10479341.html
