vue-cli 下的 webpack 优化

• app bundle 可以通过组件懒加载优化

• vender 优化方法：

1. 使用 cdn，然后在 webpack 配置中指定 externals。
2. 利用 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