用gzip命令把打好的包进行压缩,vue打包压缩图片

　　摘要：本文主要介绍了使用vue封装时gzip压缩的两种方案的总结，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

介绍两种gzip压缩的方式

　　1.打包时，对应的。gz文件通过webpack配置生成。当浏览器请求诸如xx.js/css,的文件时，服务器返回相应的xxx.js.gz文件；

　　2.当浏览器请求xx.js文件时，服务器会对xx.js文件进行gzip压缩，传输给浏览器。

webpack打包生成gz文件

　　安装插件(压缩-web pack-插件):

　　npm安装压缩-web pack-插件-保存-开发

　　webpack配置的Vue.config.js文件(如果没有这个文件，可以在项目的根路径下创建一个文件):

　　const compression plugin=require( compression-web pack-plugin )；

　　模块.导出={

　　插件：[

　　新压缩插件({

　　算法：“gzip”，//使用gzip压缩

　　测试：/\。js$\。html$\。css$/，//匹配文件名

　　文件名：[路径]。 gz[query]，//压缩文件名(保留原文件名。gz后缀)

　　MinRatio: 1，//压缩前压缩率小于1。

　　阈值：10240，//压缩10k以上的数据

　　DeleginalAssets: false，//是否删除未压缩的源文件？小心设置。如果您想提供非gzip资源，您可以将其留空或将其设置为false(例如，在删除打包的GZI后，您可以将其加载到原始资源文件中)

　　}),

　　};

　　这里压缩的是js、html、css文件，而不是图片，因为图片压缩实际上并不能减少文件大小，反而会导致打包后产生很多同样大小的gz文件，得不偿失。

　　当然，如上所述，当浏览器请求xx.js/css,等文件时，服务器会返回相应的xxx.js.gz文件，因此需要在服务器上配置一个属性，以期望它正常返回我们需要的gz文件。

　　这里以nginx为例(nginx.conf文件):

　　http {

　　包括mime.types

　　default_type应用程序/八位字节流；

　　在上发送文件；

　　# tcp _ nopush on

　　# keepalive _ time out 0；

　　keepalive _ timeout 65

　　gzip _ static on

　　服务器{

　　听8462；

　　server_name本地主机；

　　位置/{

　　根距离；

　　索引index.html index.htm；

　　}

　　error _ page 500 502 503 504/50x . html；

　　location=/50x.html {

　　根html

　　}

　　属性gzip_static on用于静态加载本地gz文件。

　　看下效果：

　　gzip压缩比是5-6倍。nginx配置了静态gz加载后，浏览器也会返回gz文件，会请求小文件，不会造成请求卡线程。而且因为源文件是保留的，所以当我们删除gz的时候，浏览器会自动请求原始文件，不会导致界面出现任何问题(如图2)。

　　gz文件的静态加载主要依赖于下面的请求头：

服务器在线gzip压缩

　　前端不需要任何配置，也不需要webpack生成gz文件，服务器处理。以nginx为例：

　　http {

　　包括mime.types

　　default_type应用程序/八位字节流；

　　在上发送文件；

　　# tcp _ nopush on

　　# keepalive _ time out 0；

　　keepalive _ timeout 65

　　#打开gzip

　　gzip打开；

　　#设置缓冲区大小

　　gzip _ buffers 4 16k

　　#官网推荐的压缩级别是6。

　　gzip _ comp _ level 6；

　　#压缩类型

　　gzip_types文本/普通应用/javascript文本/css应用/xml文本/javascript应用/x-httpd-PHP；

　　服务器{

　　听8462；

　　server_name本地主机；

　　位置/{

　　根距离；

　　索引index.html index.htm；

　　}

　　error _ page 500 502 503 504/50x . html；

　　location=/50x.html {

　　根html

　　}

　　上面有一些关于gzip的配置。首先，打开gzip，设置缓冲区大小、压缩级别、要压缩的文件等。(如果需要更详细的配置，可以查看nginx的配置文档)，看看效果：

　　响应头会携带gzip压缩配置，服务器会在每次请求xx.js文件时进行实时压缩。

　　两种方案的优缺点：

　　1.webpack打包，然后直接用静态gz。缺点是打包后文件大小过大，但不消耗服务器性能；

　　2.使用nginx online gzip，缺点是消耗性能，需要实时压缩。但是，vue包的文件大小很小。

　　可能这里会有同学提问。有gz文件的时候想做静态压缩，没有gz文件的时候想做在线压缩而不是加载源文件。我该怎么办？

　　简单，两种配置都写上即可。

　　gzip打开；

　　gzip _ static on

　　gzip _ comp _ level 2；

　　gzip _ types text/纯文本/html text/CSS application/x-JavaScript text/XML application/XML application/XML RSS text/JavaScript；

　　首先，gzip_static的优先级很高，所以会先加载静态的gz文件。当这个文件不在同一个目录中时，它将执行online compression命令。

　　有朋友会疑惑，既然都开启了，怎么区分静态加载和在线压缩呢？

　　响应头的Content-Edcoding:gzip表示gzip压缩已经生效，而Etag中只有简单的字符表示静态资源加载，前面的W/表示开始在线压缩。

　　看下图：

　　gzip压缩有两种方案。

vue项目开启gzip压缩

前端配置

　　解包后，我们用gzip压缩安装compression-webpack-plugin。

　　//yarn add compression-web pack-plugin-D

　　//引入并修改vue.congig.js中的webpack配置

　　const compression plugin=require( compression-web pack-plugin )

　　configureWebpack: (config)={

　　if(process . ENV . node _ ENV=== production ){

　　//修改生产环境的配置.

　　config.mode=生产

　　返回{

　　插件：[新压缩插件({

　　测试：/\。js$\。html$\。css/，//匹配文件名

　　阈值：10240，//压缩10k以上的数据

　　DeleginalAssets:false//删除原始文件？

　　})]

　　}

后端配置

　　我们还需要相应地配置服务器。如果发送请求的浏览器支持gzip，则发送一个gzip格式的文件。我的服务器是用express framework搭建的，安装压缩就可以使用。

　　const compression=require(压缩)

　　App.use(compression()) //在使用其他中间件之前调用

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录