webpack的性能优化

[GGXXMM]

一、编译速度构建优化

1、编译速度分析

使用speed-measure-webpack-plugin 分析每个loader和plugin执行耗时，如图所示：

2、缩小文件的搜索范围

1）配置loader，通过test、exclude、include缩小搜索范围
2）配置module.noParse，告诉webpack哪些模块不必解析

3、多进程并行压缩代码

4、使用tree shaking擦除无用的JavaScript、CSS代码

5、充分利用缓存提升二次构建的速度

使用上述优化策略，构建速度基本可以提升70~80%左右。例如一个vue项目进行优化，编译速度前后对比如下：

编译速度提升75%

二、构建体积优化

1、打包内容分析

使用webpack-bundle-analyzer 分析Bundle的每个模块体积大小，如图所示：

2、配置external，提取第三方工具包不进行webpack打包

3、开启TreeShaking

三、加载速度优化

1、使用Imagemin，对图片进行压缩

2、限制chunck数量，合理控制http请求

3、使用Scope Hoisting

在线分析工具

• 生成统计文件 stats.json
  在 webpack 启动时带入参数：--profile --json > stats.json，例如：

webpack --config webpack.config.prod.js --profile --json > stats.json

• Webapck Analyse

• Webpack Visualizer 分析工具
• webpack bundle optimize helper 分析工具