认识

2024年11月21日

柏拉文

越努力，越幸运

一、认识

---

从 Webpack 4 开始，会根据你选择的 mode 来执行不同的优化， 不过所有的优化还是可以手动配置和重写。

二、语法

---

module.exports = {
    optimization: {
        minimize: true,
        runtimeChunk: "single", // 提取 runtime，优化加载, 优化运行时和公共模块，显著降低每个页面的体积。
        splitChunks: {
            chunks: "all", // 分割同步和异步模块
            cacheGroups: {
                lodash: {
                    name: "lodash", // 输出文件名为 lodash.js
                    test: /[\\/]node_modules[\\/]lodash[\\/]/, // 匹配 lodash
                    chunks: "all",
                    priority: 10,
                },
                vendors: {
                    chunks: "all",
                    priority: 9,
                    name: "vendors",
                    test: /[\\/]node_modules[\\/]/,
                },
                common: {
                    priority: 8,
                    minSize: 0,
                    chunks: "all",
                    name: "common",
                    reuseExistingChunk: true,
                    test: /[\\/]src[\\/]common[\\/]/,
                },
            },
        }
    }
}