webpack做性能优化主要从两个方面[开发环境]和[生产环境]做优化
开发环境优化
更快的构建速度、模块热更新、source map
-
通过
cache： { type: 'systemfile'}开启缓存构建可以加快二次构建的效率 -
通过模块热替换可以做到局部更新变化，提高开发效率
-
根据设置
devtool： cheap-eval-source-map在保证构建效率的同时又能进行代码调试 -
使用Thread-loader以多进程的方式运行资源加载逻辑
-
通过 stats 来分析性能做优化
生产环境优化
更小的体积，更稳定又快的性能
-
压缩代码：使用
UglifyJsPlugin和ParallelUglifyPlugin来压缩代码 利用cssnano(css-loader? minimize)来压缩css -
利用CDN：可以使用CDN来加快对静态资源的访问，提高用户的使用体验
-
Tree Shaking: 删除没用到的代码 -
提取公共第三方库： 使用
SplitChunksPlugin插件来进行公共模块抽取 -
使用TerserWebpackPlugin多进程执行代码压缩、uglify 功能
