如何提升webpack构建速度
# 如何提升webpack构建速度
# 分析打包速度
使用插件 speed-measure-webpack-plugin
# 常用优化方法
- 优化Loader配置
由于Loader对文件的转换操作很耗时，所以需要让尽可能少的文件被Loader处理。我们可以通过以下3方面优化Loader配置：
- 优化正则匹配
- 通过cacheDirectory选项开启缓存
- 通过include、exclude来减少被处理的文件
- 优化resolve.modules配置
resolve.modules 用于配置Webpack去哪些目录下寻找第三方模块。resolve.modules的默认值是［node modules］，含义是先去当前目录的/node modules目录下去找我们想找的模块，如果没找到，就去上一级目录../node modules中找，再没有就去../ .. /node modules中找，以此类推，这和Node.js的模块寻找机制很相似。当安装的第三方模块都放在项目根目录的./node modules目录下时，就没有必要按照默认的方式去一层层地寻找，可以指明存放第三方模块的绝对路径，以减少寻找
- 优化resolve.alias配置
resolve.alias配置项通过别名来将原导入路径映射成一个新的导入路径
- 优化resolve.extensions配置
在导入语句没带文件后缀时，Webpack 会在自动带上后缀后去尝试询问文件是否存在。默认是：extensions :[‘. js ‘,’. json ’] 。也就是说，当遇到require ( '. /data ’）这样的导入语句时，Webpack会先去寻找./data .js 文件，如果该文件不存在，就去寻找./data.json 文件，如果还是找不到就报错。如果这个列表越长，或者正确的后缀越往后，就会造成尝试的次数越多，所以 resolve .extensions 的配置也会影响到构建的性能
- 后缀尝试列表要尽可能小，不要将项目中不可能存在的情况写到后缀尝试列表中
- 频率出现最高的文件后缀要优先放在最前面，以做到尽快退出寻找过程
- 在源码中写导入语句时，要尽可能带上后缀，从而可以避免寻找过程。例如在确定的情况下将 require(’. /data ’)写成require(’. /data.json ’)，可以结合enforceExtension 和 enforceModuleExtension开启使用来强制开发者遵守这条优化
- 优化resolve.noParse配置
noParse配置项可以让Webpack忽略对部分没采用模块化的文件的递归解析和处理，这 样做的好处是能提高构建性能。原因是一些库如jQuery、ChartJS 庞大又没有采用模块化标准，让Webpack去解析这些文件既耗时又没有意义
提取公共代码
按需加载代码
优化SourceMap
因为不同的source map配置选项生成的映射文件内容不同，比如有的不会生成代码的列信息
- 开启多进程打包
- thread-loader
- HappyPack
- 利用缓存
- cache-loader
- HardSourceWebpackPlugin（正在使用的，能提升90%的时间）
# 参考文章链接
Vue项目Webpack优化实践，构建效率提高50% (opens new window)
玩转 webpack，使你的打包速度提升 90% (opens new window)
你可能不知道的9条Webpack优化策略 (opens new window)
学习 Webpack5 之路（优化篇） (opens new window)