关于webpack: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拜访以后文件门路
反对入口文件描述符，指定依赖

目录