1 持久化缓存
缓存在webpack5中默认开启，缓存默认是在内存里,但可以对cache进行设置
cache: {
type: 'filesystem', //'memory' | 'filesystem' cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack'),
},
2 资源模块
资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader
- raw-loader => asset/source 导出资源的源代码
- file-loader => asset/resource 发送一个单独的文件并导出 URL
- url-loader => asset/inline 导出一个资源的 data URI
- asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现
3 URIs （会用的比较少）
Webpack 5 支持在请求中处理协议
支持data 支持 Base64 或原始编码,MimeType可以在module.rule中被映射到加载器和模块类型
4 moduleIds & chunkIds的优化
- 在webpack5之前，没有从entry打包的chunk文件，都会以1、2、3...的文件命名方式输出,删除某些些文件可能会导致缓存失效
- 在生产模式下，默认启用这些功能chunkIds: "deterministic", moduleIds: "deterministic"，此算法采用确定性的方式将短数字 ID(3 或 4 个字符)短hash值分配给 modules 和 chunks
chunkId设置为deterministic，则output中chunkFilename里的[name]会被替换成确定性短数字ID
虽然chunkId不变(不管值是deterministic | natural | named)，但更改chunk内容，chunkhash还是会改变的
可选值 含义 示例
natural: 按使用顺序的数字ID 1
named: 方便调试的高可读性id src_two_js.js
deterministic: 根据模块名称生成简短的hash值 915
size: 根据模块大小生成的数字id 0
5 移除Node.js的polyfill
webpack4带了许多Node.js核心模块的polyfill,一旦模块中使用了任何核心模块(如crypto)，这些模块就会被自动启用
webpack5不再自动引入这些polyfill
如果要引入加上
reslove:{
fallback:{
"crypto":require.resolve("crypto-browerify")
//...包括stream buffer
}
}
6 更强大的tree-shaking
tree-shaking就在打包的时候剔除没有用到的代码
- webpack4 本身的 tree shaking 比较简单（直接import整个文件或者对象内部未使用的不能被剔除；commonJs模式不支持）,主要是找一个 import 进来的变量是否在这个模块内出现过
- webpack5可以进行根据作用域之间的关系来进行优化,开始支持
会分析模块的引用关系
webpack.config.js:配置：optimization:true 会给没使用的文件进行标记:
unused harmony export nums ,在prodction模式中会被删除
webpack4:在编写支持 tree-shaking 的代码时，导入方式非常重要。你应该避免将整个库导入到单个 JavaScript 对象中。当你这样做时，你是在告诉 Webpack 你需要整个库， Webpack 就不会摇它。
// 全部导入 (不支持 tree-shaking)
import _ from 'lodash';
// 具名导入(支持 tree-shaking)
import { debounce } from 'lodash';
modudleId
- 开发环境下 模块ID是相对于根目录的相对路径，上线不行
sideEffects:false
函数副作用指当调用函数时，除了返回函数值之外，还产生了附加的影响,例如修改全局变量
严格的函数式语言要求函数必须无副作用
sideEffects:false值，就认为所有的js文件都没有副作用,就可以在内部css的loader中设置sideEffects:true(表示有副作用)
image.png
//package.json: css有副作用不删除
"sideEffects": ["*.css"],
网友评论