webpack5优化

目录

一、构建优化（压缩代码）
二、长期缓存（hash）
三、持久缓存（增量构建）
四、webpack5新特性
五、总结

一、构建优化（压缩代码）

1、Tree Shaking

（1）usedExports : true 标记出未被导出的变量
（2）minimize : true 去除无用变量并压缩代码

2、合并模块

optimization.concatenateModules = true

3、副作用sideEffects

（1）optimization.sideEffects = true 开启副作用功能
（2）package.json 中设置 sideEffects : false 标记所有模块无副作用

4、webpack5改进

（1）嵌套的 tree-shaking
这个例子可以在生产模式下删除导出的b

（2）内部模块 tree-shaking
webpack5中有一个新选项 optimization.innerGraph，在生产模式下默认开启，可以对模块中的标志进行分析，找出导出和引用之间的依赖关系。

• 内部依赖图算法会找出 something 只有在使用 test 导出时才会使用。这允许将更多的出口标记为未使用，并从代码包中省略更多的代码。
• 当设置"sideEffects": false时，若test 导出未被使用时，./something 将被省略。

（3）其它优化

• CommonJs Tree Shaking
• 副作用分析：可以根据对源代码的静态分析，自动将模块标记为无副作用
• 模块合并：支持更多模块，如 ExternalModules 和 json 模块
• 通用 Tree Shaking 改进
  export * 已经改进，可以跟踪更多的信息，并且不再将默认导出标记为使用

• 改进代码生成
  会生成更短的代码 Object(...)->(0, ...)
  合并运行时函数

   r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});

二、长期缓存（hash）

1、哈希

• hash

所有chunk文件使用相同的hash
项目中任一文件内容发生变化都会影响所有chunk文件hash

• chunkhash (不利于js和css分离)

基于 webpack 的 entry point
任意文件改变只会影响其所属的chunk，不会影响其它chunk。

• contenthash

基于文件内容产生的hash
影响范围只限于本文件

2、新的问题

webpack 模块 ID 默认是按照依赖顺序递增分配的，这会使得依赖了某个出现改动 chunk 的其他 chunk 内容也跟着变化，导致浏览器缓存失效。增减模块会导致顺序错位
（1）webpack4 之前 使用new webpack.HashedModuleIdsPlugin()
（2）webpack5 新增了长期缓存的算法，在生产模式下是默认启用。

chunkIds: "deterministic" 
moduleIds: "deterministic"
mangleExports: "deterministic"

deterministic 选项有益于长期缓存，生成bundles比 hashed 小，比size大。稳定性ID， 这是包大小和长期缓存之间的一种权衡

3、webpack5长期缓存其它优化

（1）真正的contenthash

webpack4 之前只是针对于文本结构
webpack5 当只有注释被修改或变量被重命名时 将不会促使hash改变

三、持久缓存（增量构建）

cache配置

• webpack4 : 支持缓存在内存中
  cache : false/{}
• webpack5 : 默认存在缓存，可以配置存在硬盘中

四、webpack5其它新特性

1、加载资源模块

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

2、改进 target 配置

允许指定最低版本号

"node10.13''
["web", "es2020"]
"browserslist"

3、入口文件描述符

4、Web 平台特性

• import.meta

import.meta.webpackHot 是 module.hot 的别名，在严格的 ESM 中也可以使用。
import.meta.webpack 是 webpack 的主要版本号。
import.meta.url 是当前文件的 file: url(类似于__filename，但作为文件 url)

• 资源模块
  new URL("./image.png", import.meta.url)
• 原生 Worker 支持
  new Worker(new URL("./worker.js", import.meta.url))

5、开发支持

• 在开发模式下，默认用文件名生成 chunk ID 算法

不再需要import(/ webpackChunkName: "name" / "module")

• 模块联邦（微前端）

不同项目共享模块

6、不再为 Node.js 模块 自动引用 Polyfills

总结

1. webpack5增强了对模块之间依赖的分析能力，从而提升了tree shaking的能力，如：嵌套、内部依赖、改进代码生成
2. 长期缓存： webpack5 生产环境默认计算hash方式为deterministic，生成更稳定的chunkId, 有利于长期缓存
3. 增量构建：webpack5 丰富了cache配置，可以指定缓存存放在文件系统中，不容易失效，加大了构建速度
4. webpack5新增了一些web新特性

• 资源模块无需使用loader
• 不同项目之前共享模块
• 支持通过import.meta访问当前文件路径
• 支持入口文件描述符，指定依赖