在Web开辟中，优化资源文件的巨细

1. asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
2. This can impact web performance.
3. Assets:
4.   f2b752e966b6e8a1.worker.js (869 KiB)
5.   static/img/BG1.f4d51425.png (697 KiB)
6.   static/js/app.ea4bdf9a.js (416 KiB)
7.   static/img/banner.fffeee23.png (406 KiB)
8.   static/css/chunk-vendors.e6961e46.css (354 KiB)
9.   static/js/chunk-vendors.7d6366c2.js (2.51 MiB)

复制代码

CompressionWebpackPlugin—进步 Web 应用性能的利器

在现代 Web 开辟中，优化资源加载速率是提拔用户体验的紧张环节。淘汰文件巨细可以明显提拔网页加载速率，从而改善用户体验。CompressionWebpackPlugin 是一个强大的 Webpack 插件，它可以在构建过程中自动压缩资源文件，为浏览器提供更小的文件。本文将详细介绍 CompressionWebpackPlugin 的功能、设置和利用方法，资助你优化 Web 应用的性能。
安装 CompressionWebpackPlugin

首先，在项目中安装 compression-webpack-plugin：

1. npm install compression-webpack-plugin --save-dev

复制代码

设置 Webpack

在 webpack.config.js 文件中设置 CompressionWebpackPlugin。以下是一个简单的示例：

1. const CompressionWebpackPlugin = require('compression-webpack-plugin');
3. module.exports = {
4.     mode: 'production',
5.     plugins: [
6.         new CompressionWebpackPlugin({
7.             filename: '[path][base].gz', // 输出文件名
8.             algorithm: 'gzip', // 压缩算法
9.             test: /\.(js|css|html|svg)$/, // 匹配需要压缩的文件类型
10.             threshold: 10240, // 只处理大于 10KB 的文件
11.             minRatio: 0.8, // 只有压缩率小于 0.8 的文件才会被处理
12.             deleteOriginalAssets: false, // 是否删除原始文件
13.         }),
14.     ],
15. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。