如何在使用Webpack性能对象的Vue CLI 3中将js文件拆分成块？

Question

我使用vue cli v3完成了一个项目。在构建项目后，我看到了2个警告，即：

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  js/chunk-vendors.2557157d.js (474 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

  app (617 KiB)

      js/chunk-vendors.2557157d.js

      css/app.821fcb13.css

      js/app.b5a47a94.js

现在经过检查，我发现如果我在Webpack配置中添加以下内容

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

然后它将自动将js文件分成小块。现在，在vue cli 3中没有webpack.config文件。因此，如果您能够指导如何实现此功能，以便当文件超过某个限制时自动进行分块，那将非常有帮助。这是我看到它的地方：https://github.com/webpack/webpack/issues/3486#issuecomment-397915908。期待您的回复。附言：我已阅读了这篇文章，并尝试创建了vue.config.js文件，并在文件中添加了以下内容。

module.exports = {
  configureWebpack: {
    performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
    }
  }
}

但是它没有做任何事情。有人可以帮忙告诉我该怎么做才能确保我的js文件块不会超过vue的推荐大小吗？

更新

根据Linus Borg的答案，我尝试将以下两个代码放入vue.config.js文件中。尝试1：

module.exports = {
  configureWebpack: {
    splitChunks: {
            minSize: 10000,
            maxSize: 250000,
        }
  }
}

并且 尝试2:

module.exports = {
  configureWebpack: {
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
  }
}

当我为生产环境构建项目时，两者都出现了相同的警告，尽管没有更改任何大小：https://i.imgur.com/7Hp7SXC.jpg 看起来它们都没有影响任何变化。需要帮助吗？

- iSaumya

Answer 1

以下内容添加到我的vue.config.js文件中，最终在执行npm run build时对我的@vue/cli项目（版本3.0.4）进行了所有供应商资产的分块处理。

module.exports = {
  configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

隐藏警告

module.exports = {
  configureWebpack:{
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

- tbonz

---

@iSaumya 如果您想隐藏警告，可以使用上面编辑过的配置。但是，除非您开始删除依赖项或进行进一步的代码拆分，否则只能将某些文件块减少到一定程度。您还可以尝试将“maxSize”值减小到250000以下。 - tbonz

嗨，在我的vue项目中，我已经进行了大量的代码分割。我已经异步导入了每个组件和路由。不幸的是，我无法异步加载import a from 'b'，因为它在代码内部使用，但在大多数地方，我已经进行了代码分割，只是不能拆分供应商。 - iSaumya

Answer 2

你误解了你更改的设置，可能是因为你误读了你链接到的评论。

那些不是告诉webpack如何/何时分割块的限制，它们只定义了在控制台中显示警告的上限，仅此而已。

你真正想要更改的是splitChunks的设置。不幸的是，对于初学者来说，这个选项可能会非常复杂，所以我建议阅读这篇文章以更好地理解它的实际工作原理。

然而，这篇文章没有介绍的是，在最近的版本中，splitChunks添加了一个新的实验性选项：maxSize。

它应该像这样工作：

configureWebpack: {
    optimization: {
        splitChunks: {
            minSize: 10000,
            maxSize: 250000,
        }
    }
}

请记住这是实验性的，因此更可靠的方法是通过配置splitchunks来创建不超过您大小限制的块，方法是将不同的依赖项手动放入不同的块中，使用splitChunks.cacheGroups。

- Linus Borg

---

嗨，我尝试将以下两个代码放入vue.config.js文件中。 尝试1：https://pastebin.com/9k3EsuUf 和尝试2：https://pastebin.com/CjqfURfd 在这两个尝试之后，当我为生产构建我的项目时，我看到了相同的警告，而没有改变任何大小：https://i.imgur.com/7Hp7SXC.jpg 似乎它们都没有影响任何更改。 有什么帮助吗？ - iSaumya

Answer 3

这是我的配置文件，在我的项目中可以正常工作，请尝试使用。

module.exports = {
    configureWebpack: {
        performance: {
            hints: "warning", // enum
            maxAssetSize: 1048576, // int (in bytes),
            maxEntrypointSize: 1048576, // int (in bytes)
        }
    }
}

- MuteG

---

嗨，我使用了上述配置，但仍然看到以下警告：https://pastebin.com/sxY38XFC 该怎么办？ - iSaumya