构建分析

1. 速度分析 -- speed-measure-webpack-plugin

2. 体积分析 -- webpack-bundle-analyzer

构建速度优化(1)

使用高版本webpack和nodejs

webpack3 VS webpack4

webpack4的优点（Performance）

1. v8带来的优化(for of替代forEach、Map和Set替代Object、includes替代indexOf)
2. 默认使用更快的 md4 hash算法
3. webpack AST可以直接从loader传递AST，减少解析时间
4. 使用字符串替代正则表达式

构建速度优化(2)

多进程 多实例 构建

happyPack(webpack3)

thread-loader(webpack4)

构建速度优化(3)

缓存：提升二次构建速度

思路：
1. babel-loader 开启缓存
2. terser-webpack-plugin 开启缓存
3. hard-source-webpack-plugin (为模块提供中间缓存步骤)

现象：
如果有缓存的话，会在node_modules下面存在.cache目录，该目录放缓存内容

1. bable-loader 缓存

2. terser-webpack-plugin 缓存

3. hard-source-webpack-plugin 缓存

构建速度优化(4)

1. 优化 resolve.modules 配置（减少模块搜索层级）
2. 优化 resolve.mainFields 配置
3. 优化 resolve.extensions 配置
4. 合理使用 alias

构建体积优化(1)

多进程并行压缩， 在代码解析完成之后，在代码输出之前，有一个压缩阶段

terser-webpack-plugin 支持es6语法的压缩，推荐使用这个

uglifyis-webpack-plugin 不支持

开启并行压缩都是parallel参数，默认数量cpu*2 - 1

webpack3版本使用uglifyis-webpack-plugin

webpack4版本使用terser-webpack-plugin

构建体积优化(2)

分包：把公共的文件单独拿出来

html-webpack-externals-plugins

缺点需要把每个包的cdn地址都写出来

预编译资源模块

思路：将react、redux、react-dom、react-redux等等基础包和业务包打包成一个文件

方法：使用DLLPlugin进行分包，DLLReferencePlugin对manifest.json引用

使用DLLPlugin进行分包

webpack.dll.js

构建体积优化(3)

缩小构建目标：尽可能的少构建模块

比如bable-loader不解析node_modules

构建体积优化(4)

1. tree shaking

概念：一个模块可能有多个方法，只要用到了其中的几个方法，则整个文件都被打到bundle文件中了，tree shaking就是只把用到的方法打到bundle中，没用到的方法会在uglify阶段被擦除；

使用：webpack默认支持，在.babelrc里设置 modules: false 即可 .production mode 的情况默认开启

要求：必须是 es6 方法，cjs 的方式不支持

2. PurifyCSS

遍历代码，识别已经用到的 CSS class

3. uncss

HTML需要通过 jsdom 加载，所有的样式通过PostCSS解析，通过document.querySelector来识别在 html 文件里面不存在的选择器

4. webpack4 用purgecss替代

在webpack3中使用purgecss和ExtractTextPlugin

构建体积优化(5)

图片压缩，我们在构建体积优化的时候，首要的是图片的优化

imagemin的优点和原理分析

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

构建体积优化(6)

原理: 识别浏览器携带过来的User Agent，下发不同的Polyfill

如何使用Polyfill