ToB企服应用市场:ToB评测及商务社交产业平台

标题: 在Web开辟中，优化资源文件的巨细 [打印本页]
作者: 万万哇    时间: 昨天 19:53
标题: 在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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4