vue-cli webpack 优化

跟着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 中添加资源引用

   <script src="//cdn.bootcss.com/vue/2.5.7/vue.min.js"></script>
      <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
      <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="//cdn.bootcss.com/element-ui/2.2.0/index.js"></script>
      <script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
      <script src="//cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
      <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>

有时候，由于网络限制，不允许使用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引入（必须首先引入）

<script src="/static/js/vendor.dll.js"></script>

第五步：执行构建

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build