Vue.js 如何使用 webpack 性能对象在 vue cli 3 中将 js 文件分成块

我使用vue cli v3完成了一个项目.在建设项目后，我看到了两个警告，即:.

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

现在经过判断，我发现如果我在网页配置中添加以下内容

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

然后它会自动将js文件分成小块.现在在vue cli 3中没有网页包.配置文件.

所以，如果您能指导如何实现这一点，使文件在超过某个限制时自动分块，这将非常有用.

这就是我看到它的地方:https://github.com/webpack/webpack/issues/3486#issuecomment-397915908

期待您的回复.

附言:我读过this，try 创建vue.config.js文件，并在文件中添加了以下内容

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

但它什么也没做.谁能帮我告诉我该怎么做，以确保我的js文件块不会超过vue推荐的大小？

使现代化

根据Linus Borg的回答，我try 将以下两个代码放入vue.config.js文件中.Try 1:

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

和Try 2:

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

在这两次之后，当我为生产建立我的项目时.我看到了同样的警告，但没有改变任何尺寸:https://i.imgur.com/7Hp7SXC.jpg