主要功能更新

• 通过持久缓存提高构建性能
• 使用更好的算法和默认值选项改善长期缓存
• 通过更好的Tree Shaking和代码生成来改善生成包大小
• 改善与Web平台的兼容性
• 在不引入任何重大更改的前提下，实现v4版本中的功能的同时清理处于异常状态的内部结构
• 现在就引入重大更改，为将来的功能做准备，使我们能够尽可能长时间地使用v5

1. 重大变更：长期缓存

确定的 Chunk、模块 ID 和导出名称

新增了长期缓存的算法。这些算法在生产模式下是默认启用的。chunkIds: "deterministic"、moduleIds: "deterministic" 、mangleExports: "deterministic"该算法以确定性的方式为模块和分块分配短的（3 或 5 位）数字 ID， 这是包大小和长期缓存之间的一种权衡.

moduleIds/chunkIds/mangleExports: false 禁用默认行为，你可以通过插件提供一个自定义算法。请注意，在 webpack 4 中，moduleIds/chunkIds: false 如果没有自定义插件，则可以正常运行，而在 webpack 5 中，你必须提供一个自定义插件。(没卵用)

迁移：最好使用 chunkIds、moduleIds 和 mangleExports 的默认值。你也可以选择使用旧的默认值chunkIds: "size"，moduleIds: "size", mangleExports: "size"，这将会生成更小的包，但为了缓存，会更频繁地将其失效。

注意：在 webpack 4 中，散列的模块 id 会导致gzip性能(文件压缩)降低。这与模块顺序的改变有关，已经被修正。

注意：在 webpack 5 中，deterministic Ids 在生产模式下是默认启用的。

弃用了 optimization.moduleIds: "hashed",添加了 optimization.moduleIds: "deterministic"。

2. 重大变更：性能优化

持久缓存(更快的编译速度)

cache在webpack4版本中就有,不过需要进行配置， webpack5不再需要cache-loader。 对于babel cacheDirectory 等也是如此。

3. 重大变更: 功能清除

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

迁移：
尽量使用前端兼容的模块
可以手动为Node.js 核心模块添加 polyfill。错误提示会告诉你如何实现。
Package 作者：在 package.json 中添加 browser 字段，使 package 与前端兼容。为浏览器提供其他的实现/dependencies。

4. 重大变更: 构建优化

tree-shaking

代码块拆分与模块大小 minSize、maxSize

在webpack4中默认只能处理js的大小

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "all",
                    name: "commons",
                    minChunks: 1,
                    minSize: "数值",
                    maxSize: "数值"
                }
            }
        }
    }
}

但在webpack5中，可以把js和css都进行处理

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "all",
                    name: "commons",
                }
            },
            //最小的文件大小 超过之后将不予打包
            minSize: {
                javascript: 0,
                style: 0,
            },
            //最大的文件 超过之后继续拆分
            maxSize: {
                javascript: 1, //故意写小的效果更明显
                style: 3000,
            }
        }
    }
}

参考文档:

1. https://juejin.im/post/6884954719798689800
2. https://webpack.docschina.org/blog/2020-10-10-webpack-5-release/

Related Issues not found

Please contact @bajiu to initialize the comment

Login with GitHub