Webpack 从 vendor 文件中进行代码拆分？

Question

我们使用了一些 js 库，它们在内部导入了 lodash 和 moment。

两者都以能够很容易地使您的包膨胀而闻名，除非您对导入很聪明。

我们正试图减少我们的初始包大小，因为 lodash 和 moment 只在网站的 20% 左右需要。

--

我知道在我们的代码库中我们可以做一些事情

const moment = () => import(/* webpackChunkName "moment" */'moment');

然而，node_modules 中的库正在做:

import moment from 'moment'
import _ from 'lodash'

有没有办法使用 webpack 来标记所有这些，因为它们应该分开？

了解我们使用 Vue CLI 构建项目可能很有用，因此我们的 webpack 配置实际上存储在 vue.config.js

Answer 1

网络包 splitchunks.cacheGroups是你需要的。检查链接。

基本上你可以手动选择哪个模块进入哪个 block :

optimization: {
    splitChunks: {
      cacheGroups: {
        lodashAndMoment: {
          test(module, chunks) {
            //...
            // WATCH OUT! WATCH OUT! WATCH OUT!
            // I'm not 100% sure `module.name` actually looks like this
            // It's my IRRESPONSIBLE GUESS just to show the idea.
            return module.name === 'lodash' || module.name === 'moment';
          }
// ...
}