在使用 Webpack 打包前端项目时，有时候会出现”WARNING in asset size limit: The following asset(s) exceed the recommended size limit” 警告，这个警告通常是由于某个打包出来的文件大小超过了预设的大小限制所引起的。如果不及时处理，这个警告可能会导致一些潜在的问题，比如网页加载速度变慢，用户体验不佳等。那么，我们该如何处理这个警告呢？
1. 了解警告信息
首先，我们需要了解警告信息的含义。这个警告信息通常会告诉我们是哪些文件超过了预设的大小限制，以及预设的大小限制是多少。比如，下面是一个典型的警告信息：
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.js (264 KiB)
从这个警告信息中，我们可以看到：
- 预设的大小限制是 244 KiB；
- 超过预设大小限制的文件是 app.js；
- app.js 文件的大小是 264 KiB；
了解这些信息对我们处理警告非常有帮助。
2. 处理警告
处理警告的方法有很多种，下面介绍几种常用的方法。
2.1 压缩文件
一种处理警告的方法是通过压缩文件来减小文件大小。Webpack 提供了一些插件可以用来压缩文件，比如 UglifyJSPlugin 和 CompressionWebpackPlugin。我们可以在 Webpack 的配置文件中添加这些插件，以减小文件大小。下面是一个示例配置：
// javascriptcn.com 代码示例
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
// ...其他配置
plugins: [
new UglifyJSPlugin(),
new CompressionWebpackPlugin(),
],
};2.2 按需加载
另一种处理警告的方法是通过按需加载的方式来减小文件大小。如果某些文件只在特定的情况下才会被使用，我们可以将它们单独打包成一个文件，并在需要的时候再加载这个文件。这样可以减小首次加载的文件大小，提高网页加载速度。Webpack 提供了一些插件可以用来实现按需加载，比如 SplitChunksPlugin 和 BundleAnalyzerPlugin。下面是一个示例配置：
// javascriptcn.com 代码示例
const SplitChunksPlugin = require('webpack').optimize.SplitChunksPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
// ...其他配置
optimization: {
splitChunks: {
chunks: 'all',
},
},
plugins: [
new BundleAnalyzerPlugin(),
],
};2.3 修改预设大小限制
最后一种处理警告的方法是修改预设大小限制。如果我们认为预设的大小限制太小了，可以将它调大一些，以避免出现警告。我们可以在 Webpack 的配置文件中修改这个预设大小限制。下面是一个示例配置：
module.exports = {
// ...其他配置
performance: {
hints: false,
maxAssetSize: 1024 * 1024, // 将预设大小限制调整为 1 MiB
},
};3. 总结
在使用 Webpack 打包前端项目时，出现”WARNING in asset size limit: The following asset(s) exceed the recommended size limit” 警告是一个常见问题，但并不是什么大问题。我们可以通过压缩文件、按需加载、修改预设大小限制等方法来处理这个警告。在处理警告时，我们需要了解警告信息的含义，以便更好地处理问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6511a0bb95b1f8cacda2a464