webpack性能优化-提升构建速度

1. 合理配置mode和devtool参数

mode可以设置为development和production, 默认为production, 而production下默认会开启tree shaking。此时打包的速度会变慢。

2. 缩小文件的搜索范围

webpack打包时，如果你的代码中import或者require了别的模块或者第三方库，webpack会按照一定的规则去搜索这些模块。

• alias
• include/exclude
• noParse 告诉webpack不去解析noParse模块所依赖的库
• extensions 将使用频率较高的文件后缀优先写在前面

3. 使用HappyPack开启多进程Loader转换

在webpack构建过程中，实际上耗费时间大多数在loader解析转换，以及代码的压缩中。日常开发中我们需要使用loader对js, css, img, fonts文件做转换，并且转换的文件数据量也非常大。由于js单线程的特性使得这些转换操作不能并发处理文件，需要一个个文件进行处理。HappyPack的基本原理是将这些任务分配到子进程中进行处理，子进程处理完毕把结果发送到主进程中，从而减少构建时间。

4. 使用webpack-parallel-uglify-plugin压缩代码

这个插件可以并行的运行uglify，从而减少构建时间

5. 配置缓存

我们每次执行构建都会把文件都重新编译一遍，这样的重复工作可以被缓存下来。目前大部分loader都提供了cache配置项。可以将每次的编译结果存储到硬盘。如果当前loader不支持缓存，那可以使用cache-loader