初级分析：使用 webpack 内置的 stats

webpack 内置的 stats

stats: 构建的统计信息
package.json 中使用 stats

Node.js 中使用

二者均颗粒度太粗

速度分析：使用speed-measure-webpack-plugin

代码示例

可以看到每个 loader 和插件执行耗时

速度分析插件作用

分析整个打包总耗时
每个插件和loader的耗时情况

体积分析：webpack-bundle-analyzer

代码示例
构建完成后会在 8888 端口展示大小

体积分析插件的作用
依赖的第三方模块文件大小
业务里面的组件代码大小

使用高版本的webpack和node.js

webpack4优化原因

V8 带来的优化（for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf）
默认使用更快的 md4 hash 算法
webpacks AST 可以直接从 loader 传递给 AST，减少解析时间
使用字符串方法替代正则表达式

多进程/多实例构建

资源并行解析可选方案

webpack4使用thread-loader，webpack3使用HappyPack

使用 HappyPack 解析资源

原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中
代码示例

使用 thread-loader 解析资源

原理：每次 webpack 解析一个模块，threadloader 会将它及它的依赖分配给 worker 线程中

多进程/多实例并行压缩代码

方法一：使用 parallel-uglify-plugin 插件

方法二：uglifyjs-webpack-plugin 开启 parallel 参数

方法三：terser-webpack-plugin 开启 parallel 参数

进一步分包：预编译资源模块

设置 Externals

思路：将 react、react-dom 基础包通过cdn 引入，不打入 bundle 中
方法：使用 html-webpack-externalsplugin

预编译资源模块使用 DLLPlugin 进行分包

思路：将 react、react-dom、redux、react-redux基础包和业务基础包打包成一个文件
方法：使用 DLLPlugin 进行分包，DllReferencePlugin对 manifest.json 引用
使用 DllReferencePlugin 引用 manifest.json
在 webpack.config.js 引入
引用效果

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

目的：提升二次构建速度
缓存思路：

• babel-loader 开启缓存
• terser-webpack-plugin 开启缓存

• 使用 cache-loader 或者 hard-source-webpack-plugin

  缩小构建目标

  目的：尽可能的少构建模块
  比如 babel-loader 不解析 node_modules

  减少文件搜索范围

• 优化 resolve.modules 配置（减少模块搜索层级）

• 优化 resolve.mainFields 配置
• 优化 resolve.extensions 配置

合理使用 alias

使用tree shaking擦除无用的JS和CSS

tree shaking(摇树优化)擦除无用JS

概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在uglify 阶段被擦除掉。
使用：webpack 默认支持，在 .babelrc 里设置 modules: false 即可

• production mode的情况下默认开启

要求：必须是 ES6 的语法，CJS 的方式不支持

擦除无用的 CSS

PurifyCSS: 遍历代码，识别已经用到的 CSS class
uncss: HTML 需要通过 jsdom 加载，所有的样式通过PostCSS解析，通过document.querySelector 来识别在 html 文件里面不存在的选择器

使用

使用 purgecss-webpack-plugin和 mini-css-extract-plugin 配合使用
· https://github.com/FullHuman/purgecss-webpack-plugin

使用webpack进行图片压缩

图片压缩

要求：基于 Node 库的 imagemin 或者 tinypng API
使用：配置 image-webpack-loader

Imagemin的优点分析

• 有很多定制选项
• 可以引入更多第三方优化插件，例如pngquant
• 可以处理多种图片格式

  Imagemin的压缩原理

  pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG文件小60-80％）的更高效的8位PNG格式，可显著减小文件大小。
  pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG IDAT数据流的大小。
  optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸，而不会丢失任何信息。
  tinypng:也是将24位png文件转化为更小有索引的8位图片，同时所有非必要的metadata也会被剥离掉。

构建体积优化：动态polyfill

babel-polyfill打包后体积：88.49k，占比 29.6%

Polyfill Service原理

识别 User Agent，下发不同的 Polyfill

使用动态 Polyfill service

polyfill.io 官方提供的服务
基于官方自建 polyfill 服务
//huayang.qq.com/polyfill_service/v2/polyfill.min.js?unknown=polyfill&features=Promise,Map,Set

体积优化策略总结

Scope Hoisting
Tree-shaking
图片压缩
动态 Polyfill