提升webpack打包速度的方法

webpack

 2019/09/27 

及时更新版本（node，npm等），新版本一般都会有提高打包效率的新特性
在尽可能少的模块上应用loader。可以优化文件搜索范围（即在rule中写include或exclude），eg. 可以不用编译node_modules中的代码，因为里面的都是编译过的
plugin尽可能精简并确保可靠，也尽可能少用
resolve参数合理配置
import或require的时候可以不写文件后缀，而在resolva中写resolve.extensions，并尽可能减少后缀列表长度，将出现频率高的后缀排在前面
resolve.alias：设置别名的方式映射一个路径，让webpack更快找到路径
DllPluign
DllPlugin可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数。主要当类库更新版本才有需要重新打包
控制包的大小
TreeShaking：可以删除项目中未被引用的代码
懒加载：实现按需加载，多写异步代码，提高页面的代码使用率
thread-loader和happypack可以可以利用node中的多进程，同时利用多个CPO对项目打包；对多页面应用，使用parallel-webpack可以实现对多个页面一起打包
合理使用sourceMap:用对devtool配置，在开发模式建议用cheap-module-eval-source-map；在生产模式建议用cheap-module-source-map
结合stats分析打包结果

原文作者：Jacleklm

CATALOG