如何使用 webpack 性能对象将 js 文件分解为 vue cli 3 中的块？

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

期待您的回复。

P.S.: 我已阅读 this 并尝试创建 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 似乎其中 none 正在影响任何更改。有什么帮助吗？

Answer 1

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

这些是 而不是 告诉 webpack how/when 拆分块的限制，它们只定义了在控制台中显示警告的限制，仅此而已。

您真正想要的是更改 splitChunks. Unfortunately that option an be pretty complicated to set up for a beginner, so I would recommend this article 的设置，以便更好地了解它的实际工作原理。

然而本文没有涉及的是，在最近的版本中，splitChunks 中添加了一个新的exerimental option：maxSize。

它应该像这样工作：

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

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

Answer 2

这是我的配置文件，它在我的项目中有效，请尝试一下。

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

Answer 3

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

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

隐藏警告

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

如何使用 webpack 性能对象将 js 文件分解为 vue cli 3 中的块？

How to break the js files into chunks in vue cli 3 with webpack performance object?

webpack

vue.js

vue-cli

更新