跟着Vue-cli来'学'并'改'Webpack之 打包优化
https://juejin.im/post/5a337a1f6fb9a0452b4949e0
http://git-lt.github.io/2018/04/12/webpack4/
1.修改/config/index.js文件
prod环境：productionSourceMap: false（关闭source-map，手动配置改成false,默认true，减少打包体积，提高代码安全性，防止别人看到你的源码）
2.使用静态资源或CDN资源
https://www.cnblogs.com/goloving/p/9170338.html
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
在 webpack.config.js 中配置模块变量为外部依赖
'vue' : 'Vue',
'vuex' : 'Vuex',
'vue-router' : 'VueRouter',
'element-ui' : 'Element',
'lodash' : '_',
'jquery' : 'jQuery',
'axios' : 'axios',
//属性名jquery指的是 import $ from 'jquery'中的 'jquery'
属性值 jQuery指的是jquery插件暴露出来的全局对象名。
在 index.html 中添加资源引用
有时候，由于网络限制，不允许使用CDN资源，又不想经过Webpack打包，则可以将资源直接引入 index.html ,在 webpack build 配合 copy-webpack-plugin 插件，将资源复制到 dist 目录下，例 vue-cli 生成的项目根目录下的 static 目录就是用来放这类静态资源的。
3.为babel-loader设置缓存
cacheDirectory: 指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory',
exclude: /node_modules/,
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
4.生产环境是否开启productionGzip，默认为false,在config目录下面的index.js文件中，开启productionGzip，可以产出.gz后缀结尾的js文件，浏览器会优先加载.gz后缀结尾的文件，如果浏览器不能识别，再加载正常的文件，当然后台nginx部署的时候也是可以实现gzip压缩功能。需要值得注意的是，开启productionGzip后，需要安装一个webpack插件进行配合
npm install compression-webpack-plugin -D
5.启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步，原理是将第三方库文件单独编译打包一次，以后的构建都不需要再编译打包第三方库，经过试验，打包速度加快十分明显。但是，如果打包出来的vendor.dll.js文件过大，会影响首页加载速度，参见https://blog.csdn.net/weixin_33716264/article/details/80228203
第一步：增加build/webpack.dll.config.js文件，并在其中配置需要单独DLL化的模块
const path = require("path")
const webpack = require("webpack")
module.exports = {
// 你想要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'element-ui','echarts']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
// 压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
第二步：在build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 的plugins数组中增加如下插件
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
第三步：在/package.json增加命令
"dll": "webpack --config ./build/webpack.dll.config.js"
第四步：在/index.html增加DLL化JS引入（必须首先引入）
第五步：执行构建
npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build