Vue cli3 打包时开启gzip文件压缩

喜欢ヅ旅行 2022-10-09 03:16 229阅读 0赞

## Vue cli3 打包时开启gzip文件压缩 ##

1.  webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

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

1.  如果出现**tapPromise undefined** 的错误时，可在后面加上版本号，降低版本

npm install --save-dev compression-webpack-plugin@5.0.0

1.  .在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置：

const CompressionPlugin = require("compression-webpack-plugin") 
       module.exports = { 
    	   chainWebpack(config){ 
    	      config.plugin('compressionPlugin')
    	      .use(new CompressionPlugin({ 
    	        algorithm: 'gzip',
    	        test:/\.js$|\.html$|.\css/, // 匹配文件名
    	        threshold: 10240, // 对超过10k的数据压缩
    	        minRatio: 0.8,
    	        deleteOriginalAssets: false // 不删除源文件
    	      }))
    	  }
       }

1.  打包后的文件夹中会出现后缀为gz的文件，如图：  
    ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1d2Vud2Vud2Vud2VueXU_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1d2Vud2Vud2Vud2VueXU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/9db973d996224ec78a7ab81a153771df.png

发表评论取消回复

表情：

评论列表（有 0 条评论，229人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 打包体积大如何解决？开启 gzip 压缩

nginx 配制开启gzip gzip on; 启用gzip压缩的最小文件，小于设置值的文件将不会压缩 gzip_min_lengt

￡神魔★判官ぃ/ 2022年12月17日 07:20/ 0 赞/ 246 阅读

相关 webpack 开启gzip压缩

开启gzip压缩可以有效压缩资源体积，压缩比率在3到10倍左右，可以大大节省服务器的网络带宽，提高资源获取的速度，但需要注意的是：并不是经过gzip压缩之后，所有文件都会变小。

谁借莪１个温暖的怀抱￠/ 2022年11月28日 13:25/ 0 赞/ 649 阅读

相关 Vue cli3 打包时开启gzip文件压缩

Vue cli3 打包时开启gzip文件压缩 1. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装

喜欢ヅ旅行/ 2022年10月09日 03:16/ 0 赞/ 230 阅读

相关 Vue CLI 开启gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。 webpack

墨蓝/ 2022年09月07日 09:06/ 0 赞/ 258 阅读

相关【Nginx】Nginx开启gzip压缩

在服务器Nginx开启gzip压缩是优化网站性能的方法之一，可以有效减少服务器带宽的消耗，缺点是会增大CPU的占用率，但是很多时候CPU往往是空闲最多的。引用nginx官网

古城微笑少年丶/ 2022年07月14日 14:59/ 0 赞/ 298 阅读

相关 nginx开启gzip压缩

在网上查了很多资料，大家都是这么说的： gzip on; gzip_min_length 1k; gzip_buffers 4 16k

超、凢脫俗/ 2022年05月20日 08:10/ 0 赞/ 293 阅读

相关 nginx 开启gzip压缩

gzip on; 开启Gzip gzip_min_length 1k; 不压缩临界值，大于1K的才压缩，一般不用改 gzip_buffers

蔚落/ 2022年02月23日 04:54/ 0 赞/ 342 阅读

相关 vue打包时gzip压缩的两种方案

开局一张图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

刺骨的言语ヽ痛彻心扉/ 2021年09月01日 05:44/ 0 赞/ 610 阅读

相关 Vue-cli3 开启gzip压缩

开启 gzip 压缩 gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术

喜欢ヅ旅行/ 2021年07月26日 22:49/ 0 赞/ 443 阅读

相关 resin开启gzip压缩

在web.xml中添加如下内容： <filter filter-name="gzip" filter-class="com.caucho.filters.GzipFi

亦凉/ 2021年05月12日 11:54/ 0 赞/ 853 阅读