vue-cli 下的 webpack 优化
-
app bundle 可以通过组件懒加载优化
-
vender 优化方法：
- 使用 cdn，然后在 webpack 配置中指定 externals。
- 利用 webpack 的插件 DllPlugin 和 DllReferencePlugin，把这些不常变动的第三方库都提取出来。
- 问：vender 包怎样优化？
答：一种方法：使用 cdn，然后在 webpack 配置中指定 externals。
打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。
在 webpack 里有个 externals，可以忽略不需要打包的库
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
此时的 vender 包会非常小，如果不够小还可以拆分其他的库，此时增加了请求的数量，但是远比加载一个 1.4M 的 bundle 快的多。
-
问题: 在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。
解决：利用 webpack 的插件 DllPlugin 和 DllReferencePlugin，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。
DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件，这个 json 文件中会映射每个打包的模块地址和 id，DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。
参考链接：http://www.html-js.com/article/4093
