webpack优化

大小优化

1. 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中

<!--开发环境-->
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>-->
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>

项目根目录下build/webpack.base.config.js中添加externals

externals: {
    vue: 'Vue',
    'element': 'element-ui',
    'axios':'axios',
  },

2.开启gzip压缩 compression-webpack-plugin

速度优化

利用缓存来减少打包时间
还拿这个babel-loader来举例

{ 
            test: /\.js$/,
            use: [{
                //如果文件没被改动则使用缓存
                loader: 'babel-loader?chaheDirectory'
            }]
        }

cache-loader，也能开启缓存，用法非常简单，在开销较大的loader前使用即可

 {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ],
        include: path.resolve('src')
      }

合理的使用plugin，减少打包时间和体积

首先我们尽量选择官方推荐的plugin，这些插件经过了官方的测试又可靠的性能
其次合理的使用这些插件，避免出现引入无用模块和代码，
举一些例子，比如在我们使用moment的库的时候，在打包的手webpack默认会给整个库都引入进来，这样就会导致我们的库非常大，我们可以使用IgonrePlugin忽略插件的某个无用的文件夹，这样就能大大的减少打包体积，在比如，我们在使用压缩css的OptimizeCSSAssetsPlugin的时候只需要在生产环境下对代码做压缩，那么我们在开发环境下就不需要这个插件，这样就能有效的缩短压缩时间

启用多进程打包（thread-loader）

开启多进程打包主要有三个方法，使用happy和使用thread-loader，happypack
当然由于webpack4中官方文档的极力推荐thread-loader，并且HappyPack将不再被维护，所以当我们使用多进程打包时首选thread-loader

ParallelUglifyPlugin

我们知道压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，那么我们使用ParallelUglifyPlugin这个插件就能开启多进程压缩JS使用方式也非常简单
webpack优化解决项目体积大、打包时间长、刷新时间长问题