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 似乎它们都没有影响任何变化。有什么帮助吗？

Answer 1

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

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

隐藏警告

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

Answer 2

您误解了所更改的设置，可能是因为您误读了链接到的issu注释。

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

您真正想要的是更改splitChunks的设置。不幸的是，为初学者设置该选项相当复杂，因此我建议使用this article以更好地了解其实际工作原理。

但是，本文没有涉及的是在最新版本中，新的exerimental option已添加到splitChunks：maxSize中。

它应该像这样工作：

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

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

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

更新

2 个答案: