共计 2433 个字符，预计需要花费 7 分钟才能阅读完成。
目录
一、构建优化（压缩代码）
二、长期缓存（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
总结
- webpack5 加强了对模块之间依赖的剖析能力，从而晋升了 tree shaking 的能力，如：嵌套、外部依赖、改良代码生成
- 长期缓存：webpack5 生产环境默认计算 hash 形式为 deterministic，生成更稳固的 chunkId, 有利于长期缓存
- 增量构建：webpack5 丰盛了 cache 配置，能够指定缓存寄存在文件系统中，不容易生效，加大了构建速度
- webpack5 新增了一些 web 新个性
- 资源模块无需应用 loader
- 不同我的项目之前共享模块
- 反对通过 import.meta 拜访以后文件门路
- 反对入口文件描述符，指定依赖
