01-CompressionWebpackPlugin---提高 Web 应用性能的利器

CompressionWebpackPlugin—提高 Web 应用性能的利器

笔记+分享
在现代 Web 开发中,优化资源加载速度是提升用户体验的重要环节。减少文件大小可以显著提升网页加载速度,从而改善用户体验。CompressionWebpackPlugin 是一个强大的 Webpack 插件,它可以在构建过程中自动压缩资源文件,为浏览器提供更小的文件。本文将详细介绍 CompressionWebpackPlugin 的功能、配置和使用方法,帮助你优化 Web 应用的性能。

什么是 CompressionWebpackPlugin?

CompressionWebpackPlugin 是一个用于 Webpack 的插件,能够在构建过程中生成压缩文件(例如 .gz.br 文件)。这些压缩文件可以显著减少资源文件的大小,从而加快网页的加载速度。浏览器会优先请求这些压缩文件,减少传输数据量,提高页面响应速度。

为什么选择 CompressionWebpackPlugin?

  1. 自动化压缩:在构建过程中自动生成压缩文件,无需手动处理。
  2. 支持多种压缩格式:支持 gzip、brotli 等多种压缩格式,灵活应对不同的浏览器和网络环境。
  3. 易于集成:与 Webpack 无缝集成,只需简单配置即可使用。
  4. 提升性能:显著减少资源文件大小,加快网页加载速度,提高用户体验。

安装 CompressionWebpackPlugin

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

bash
复制代码
npm install compression-webpack-plugin --save-dev

配置 Webpack

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

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

详细配置选项

CompressionWebpackPlugin 提供了丰富的配置选项,可以根据具体需求进行调整。以下是一些常用配置:

  • filename:输出文件名格式。支持使用 [path][base][name][ext] 等占位符。
  • algorithm:压缩算法,默认为 gzip,也可以使用 brotliCompress 等其他算法。
  • test:匹配需要压缩的文件类型。可以是正则表达式、数组或函数。
  • threshold:只有文件大小大于这个值的文件才会被压缩,单位为字节。
  • minRatio:只有压缩率小于这个值的文件才会被处理。
  • deleteOriginalAssets:是否删除原始未压缩的资源文件。

以下是一个更为复杂的配置示例,使用了 gzip 和 brotli 两种压缩算法:

javascript复制代码const CompressionWebpackPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');module.exports = {mode: 'production',plugins: [new CompressionWebpackPlugin({filename: '[path][base].gz',algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false,}),new CompressionWebpackPlugin({filename: '[path][base].br',algorithm: 'brotliCompress',test: /\.(js|css|html|svg)$/,compressionOptions: {params: {[zlib.constants.BROTLI_PARAM_QUALITY]: 11, // brotli 压缩质量},},threshold: 10240,minRatio: 0.8,deleteOriginalAssets: false,}),],
};

配置服务器

为了让浏览器能够正确请求到压缩后的文件,你需要在服务器上进行相应的配置。以下是 Nginx 和 Apache 的配置示例:

Nginx 配置
nginx复制代码http {gzip on;gzip_types text/plain application/xml text/css text/javascript application/javascript application/x-javascript;server {listen 80;server_name your_domain.com;location / {try_files $uri $uri/ /index.html;}location ~* \.(js|css|html|svg)$ {gzip_static on; # 启用静态 gzip 文件支持expires max;add_header Cache-Control public;add_header Content-Encoding gzip;}location ~* \.br$ {add_header Content-Encoding br;expires max;}}
}
Apache 配置
apache复制代码<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css text/javascript application/javascript application/x-javascript
</IfModule><IfModule mod_headers.c><FilesMatch "\.(js|css|html|svg)$">Header set Content-Encoding gzip</FilesMatch><FilesMatch "\.br$">Header set Content-Encoding br</FilesMatch>
</IfModule><IfModule mod_rewrite.c>RewriteEngine onRewriteCond %{HTTP:Accept-Encoding} gzipRewriteCond %{REQUEST_FILENAME}\.gz -sRewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.gz [QSA]RewriteCond %{HTTP:Accept-Encoding} brRewriteCond %{REQUEST_FILENAME}\.br -sRewriteRule ^(.*)\.(js|css|html|svg)$ $1\.$2\.br [QSA]
</IfModule><IfModule mod_mime.c>AddEncoding gzip .gzAddEncoding br .br
</IfModule>

验证压缩效果

使用 CompressionWebpackPlugin 后,你可以通过以下方法验证压缩效果:

  1. 浏览器开发者工具:打开开发者工具(按 F12Ctrl+Shift+I),在“网络”(Network)标签中查看请求的资源文件,检查 Content-Encoding 头部是否为 gzipbr

  2. 命令行工具:使用 curl 命令检查服务器响应头。例如:

    bash
    复制代码
    curl -I -H "Accept-Encoding: gzip" http://your_domain.com/path/to/your/file.js
    
  3. 性能分析工具:使用 Lighthouse 或 WebPageTest 等工具进行性能分析,查看页面加载时间和资源文件大小。

总结

CompressionWebpackPlugin 是一个强大且易于使用的 Webpack 插件,可以显著减少资源文件的大小,提高网页加载速度。通过合理配置 CompressionWebpackPlugin,并在服务器上进行相应的配置,你可以大幅提升 Web 应用的性能和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【安装笔记-20240529-Windows-Electerm 终端工具】

安装笔记-系列文章目录 安装笔记-20240529-Windows-Electerm 终端工具 文章目录 安装笔记-系列文章目录安装笔记-20240529-Windows-Electerm 终端工具 前言一、软件介绍名称&#xff1a;Wireshark主页官方介绍功能特性 二、安装步骤测试版本&#xff1a;electerm-1.39.35-win-…

【蓝桥杯】常见的数据结构

&#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &#x1f34d;博学而日参省乎己&#xff0c;知明而行无过矣 目录 &#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &…

Spring项目中Ordered接口的应用:全局过滤器(GlobalFilter)的顺序控制

在Spring框架&#xff0c;尤其是Spring Cloud Gateway或Spring WebFlux项目中&#xff0c;Ordered接口扮演着重要的角色&#xff0c;特别是在实现全局过滤器(GlobalFilter)时&#xff0c;用于控制过滤器执行的优先级。下面将介绍如何在Spring项目中使用Ordered接口来管理Global…

【AIoT-Robot】3d hand pose

手语是聋哑人士的主要沟通工具,它是利用手部和身体的动作来传达意义。虽然手语帮助它的使用者之间互相沟通,但聋哑人士与一般人的沟通却十分困难,这个沟通障碍是源于大部分人不懂得手语。 1. 手势&&手语 手势:手的姿势 ,通常称作手势。它指的是人在运用手臂时,所…

初识springcloud

springcloud eureka eureka的作用 消费者该如何获取服务提供者具体信息&#xff1f; 服务提供者启动时向eureka注册自己的信息,eureka保存这些信息消费者,根据服务名称向eureka拉取提供者信息 如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 服务消费者利…

创建模块

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;自定义模块有两个作用&#xff1a;一个是规范代码&#xff0c;让代码更易于阅读&#xff0c;另一个是方便其他程序使用已经编…

ORACLE创建dblink

dblink的作用 dblink数据库链接顾名思义就是数据库的链接&#xff0c;当我们要跨本地数据库&#xff0c;访问另外一个数据库表中的数据时&#xff0c;本地数据库中就必须要创建远程数据库的dblink&#xff0c;通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中…

Ubuntu22.04之解决:terminal使用alt+1/alt+2/alt+3失效问题(二百三十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

安卓玩机搞机技巧综合资源----电脑控制手机 投屏操控的软件工具操作步骤解析【二十二】

接上篇 安卓玩机搞机技巧综合资源------如何提取手机分区 小米机型代码分享等等 【一】 安卓玩机搞机技巧综合资源------开机英文提示解决dm-verity corruption your device is corrupt. 设备内部报错 AB分区等等【二】 安卓玩机搞机技巧综合资源------EROFS分区格式 小米红…

外发邮件监控的六种方法, 监控软件如何防止邮件泄密?

外发邮件监控的六种方法&#xff0c; 监控软件如何防止邮件泄密&#xff1f; 外发邮件监控是现代企业信息安全管理的重要组成部分&#xff0c;它有助于防止敏感信息泄露、保护知识产权、以及确保企业合规。以下是外发邮件监控的几种主要方法&#xff0c;这些方法结合使用可以为…

2024最新 Jenkins + Docker实战教程(八)- Jenkins实现集群并发构建

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

【Python Cookbook】S01E14 从字典中提取子集

目录 问题解决方案讨论 问题 如果我们想基于一个字典的子集创建另外一个字典&#xff0c;该如何做&#xff1f; 解决方案 利用 字典推导式 来解决问题&#xff1a; prices {ACME: 45.23,AAPL: 612.78,IBM: 205.55,HPQ: 37.20,FB: 10.75 }p1 {key:value for key, value in…

AI学习指南机器学习篇-逻辑回归损失函数和优化

AI学习指南机器学习篇-逻辑回归损失函数和优化 引言 在机器学习中&#xff0c;逻辑回归是一种常用的分类算法。在逻辑回归中&#xff0c;我们需要定义一个损失函数来衡量模型预测值与实际标签之间的误差&#xff0c;并且需要通过优化算法来最小化损失函数&#xff0c;从而得到…

群体优化算法----人工蜂群优化算法应用于路径规划(机器人避开平面障碍寻找最短路线)

介绍 人工蜂群优化算法&#xff08;Artificial Bee Colony Algorithm, ABC&#xff09;是由Dervis Karaboga在2005年提出的一种模拟蜜蜂觅食行为的优化算法。该算法基于蜜蜂群体的分工合作和信息交流机制&#xff0c;通过模拟蜜蜂寻找食物源的过程来解决优化问题。ABC算法因其…

netplan网络配置@ubuntu留档

ubuntu使用netplan进行网络配置&#xff0c;简单又方便。 配置的时候编辑/etc/netplan 目录里的文件即可&#xff0c;如00-installer-config.yaml文件。 固定ip配置 network:ethernets:enp0s5:dhcp4: noaddresses: [192.168.1.7/24]routes:- to: defaultvia: 192.168.1.1name…

手机和WINDOWS电脑蓝牙连接后怎样放歌,无法选择媒体音频 蓝牙媒体音频勾选不上

手机和电脑蓝牙连接后怎样放歌 要将手机通过蓝牙连接到电脑并播放音乐&#xff0c;可以按照以下步骤操作&#xff1a; 确保手机和电脑都支持蓝牙功能&#xff0c;并且蓝牙功能已经开启。 在电脑上&#xff0c;打开“设置”> “设备”> “蓝牙和其他设备”。 点击“添…

INT202 例题

算法复杂度 O(n)&#xff1a;表示算法的渐进上界。如果一个算法的运行时间是O(n)&#xff0c;那么它的运行时间最多与输入规模n成正比。换句话说&#xff0c;当输入规模n增加时&#xff0c;算法的运行时间不会超过某个常数倍的n。比如&#xff0c;如果一个算法的时间复杂度是O(…

打开常用C语言常用内存函数的大门 ——memcmp函数及其模拟实现(完结篇)

文章目录 1. 前言2. memcmp函数2.1 memcmp函数的原型2.2 memcmp的返回值2.2 memcmp的形参2.3 memcmp函数的使用 3. memcmp函数的模拟实现4. 总结 1. 前言 本文是C语言常用内存函数的最后一个函数 —— memcmp函数。 希望各位观众佬爷们能够学会并灵活的使用这四个常用的内存函…

平板显示LED背光芯片OC6700,输入3.6V~60V,升压型 LED 恒流驱动器

概述 OC6700是一款内置60V功率NMOS高效率、高精度的升压型大功率LED恒流驱动芯片。OC6700采用固定关断时间的控制方式&#xff0c;关断时间可通过外部电容进行调节&#xff0c;工作频率可根据用户要求而改变。OC6700通过调节外置的电流采样电阻&#xff0c;能控制高亮度LED灯的…

如何优化 Java 程序的性能?

优化 Java 程序的性能可以从多个方面入手&#xff0c;以下是一些常见的优化方法&#xff1a; 使用合适的数据结构&#xff1a;选择合适的数据结构可以提高程序的效率。例如&#xff0c;使用 HashMap 而不是 ArrayList 来存储大量的键值对数据。 减少对象的创建和销毁&#xff…