webpack速度体积分析

初级分析

体积分析

- 内置的stats：构建的统计信息
- 在package.json中添加script，指定 webpack --json > stats.json
- 在webpack函数内部通过参数获得stats
- 构建完成后在控制台输出构建信息

速度分析

- speed-measure-webpack-plugin
- 可以看到构建后的每个loader和plugin的执行耗时

bundle体积分析

- webpack-bundle-analyzer
- 默认在构建完成后开启8888端口展示体积分析图

速度优化

- 使用高版本的Node和webpack
- for of代替foreach，map和set代替object，includes代替indexof

多进程/多实例构建

- 在匹配js文件的最后配置thread-loader
- 会开启多线程来执行js文件的构建，加快构建速度

多进程压缩

- 通过插件 parallel-uglify-plugin，默认并行压缩
- 通过插件 uglifyjs-webpack-plugin，开启parallel参数
- 通过插件 terser-webpack-plugin，开启parallel参数（内置）

预编译资源模块

- 对基础包或者业务基础包进行分包，使其在构建时不会被分析，加快构建速度
- 通过内置的DllPlugin插件进行分包
- 通过DllReferencePlugin引用分包生成的manifestjson文件，来进行组合

缓存

- 利用缓存提升二次构建的速度
- babel-loader开启缓存，设置cacheDirectory=true
- terser-webpack-plugin开启缓存 设置cache：true
- 使用cache-loader或者hard-source-webpack-plugin

构建速度优化

- babel-loader不解析node_modules
- 优化resolve配置
    - modules：指定模块的查找位置，减少搜索的层级
    - alias：配置具名模块的位置
    - extensions：配置解析文件的后缀，webpack默认只支持js，和json后缀。
    - mainFields：指定模块解析时从package.json文件中读取该字段作为入口文件
    

摇树优化（CSS）

- PurifyCSS：遍历代码，识别已用到的CSS，purgecss-webpack-plugin配合mini-css-extract-plugin
- uncss：html需要通过jsdom加载，所有的样式通过postcss解析，通过document.querySelect来识别html文件中不存在的选择器

构建体积优化

- 图片压缩
    - 方法：基于Node的imagemin库或tinypng
    - image-webpack-loader：属于imagemin
    - 原理：将24/32位的文件转换为8位的文件格式

动态polyfill

- 引入polyfill-service CDN，来解决为所有用户引入全部的polyfill文件的问题
- 原理：通过判断用户的user agent来识别浏览器的兼容性，返回对应的polyfill文件