webpack5的更新

[dvlin-dev]

• 通过持久化硬盘缓存能力来提升构建性能
• 通过更好的算法来改进长期缓存（降低产物资源的缓存失效率）
• 通过更好的 Tree Shaking 能力和代码的生成逻辑来优化产物的大小
• 模块联邦
  • 按需，可以把一个包拆开来加载其中一部分,
  • 运行时，跑在浏览器而非 node 编译时；
  • js应用之间可以进行一些资源的共享，很适合做微前端

构建时新特性

内置静态资源构建能力-Asset Modules

• asset/source ——功能相当于 raw-loader。
• asset/inline——功能相当于 url-loader，
• asset/resource——功能相当于 file-loader。
• asset—— 默认会根据文件大小来选择使用哪种类型

内置 FileSystem Cache 能力加速二次构建

Webpack5 之前，我们会使用 cache-loader 缓存一些性能开销较大的 loader ，或者是使用 hard-source-webpack-plugin 为模块提供一些中间缓存。在 Webpack5 之后，默认就为我们集成了一种自带的缓存能力（对 module 和 chunks 进行缓存）

拓展了 WebAssembly 的异步加载能力（sync/async）

内置 Web Worker

运行时新特性

移除了 Node.js Polyfills，Polyfill 交由开发者自由控制,由于移除了 Node.js Polyfills，如果前端包里使用了 process、path 这些依赖，需要手动添加 Polyfill 支持。

https://juejin.cn/post/6924258563862822919#heading-17