Webpack5打包体积过大，怎么优化才能减小vendor.js？

芯依提问于 2026-03-12 13:38:23 阅读 5

优化

最近项目升级到Webpack5后，发现打包出来的 vendor.js 超过2MB，首屏加载特别慢。我已经用了 SplitChunksPlugin 做了基础拆分，但效果不明显。试过把 node_modules 单独拆出来，但有些第三方库还是被打包进 vendor 里，比如 lodash 和 moment。

下面是我目前的 splitChunks 配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
        chunks: 'all',
      }
    }
  }
}

是不是配置哪里不对？有没有更有效的拆包策略或者 Tree Shaking 没生效？

Plugin 打包优化构建优化

我来解答赞 2 收藏

反馈

1 条解答

一翠翠 Lv1

问题在于整个node_modules打成一个包了，需要按库拆分。配置多个cacheGroups把react、lodash、moment这些大头单独拉出来：

optimization: {

  splitChunks: {

    chunks: 'all',

    cacheGroups: {

      react: {

        test: /[/]node_modules[/](react|react-dom|scheduler)[/]/,

        name: 'react',

        chunks: 'all',

        priority: 20

      },

      lodash: {

        test: /[/]node_modules[/]lodash[/]/,

        name: 'lodash',

        chunks: 'all',

        priority: 20

      },

      moment: {

        test: /[/]node_modules[/]moment[/]/,

        name: 'moment',

        chunks: 'all',

        priority: 20

      },

      vendors: {

        test: /[/]node_modules[/]/,

        name: 'vendors',

        chunks: 'all',

        priority: 10

      }

    }

  }

}

另外lodash用lodash-es替代，moment直接换dayjs，这两个体积差十几倍。

2026-03-12 14:01