vue2 进行gzip压缩

已于 2022-02-10 09:39:46 修改
阅读量1.8k 收藏 1
点赞数
分类专栏： vue2 文章标签： JS gzip 压缩 解压 Webpack2
于 2020-07-11 11:43:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011200562/article/details/107282368
版权

在你的项目使用了Vue的路由懒加载、Vue使用CDN引用项目组件，减少项目体积 后，还是觉得项目加载速度慢，效果不尽如人意的时候，还有一个“瘦身项目”可以完成，那就是利用nginx和webpack来使用gzip压缩功能

  1. 首先把productionGzip改为true，开启Gzip压缩；在这里插入图片描述

  2. 把asset改为filename
    在这里插入图片描述

  3. 安装npm install compression-webpack-plugin@1.1.12 --save-dev
    注意安装1.1.12 版本的，不然会报错，因为高版本的插件在使用时会报ES6语法错误

至此，vue部分的配置完成。可以使用npm run build检验一下是否配置成功，如果配置没有问题打包结果与下图应该是比较类似的：

在这里插入图片描述

前端一枚
关注
专栏目录
关于 vue3 项目开启 gzip 压缩方案总结
cabinx的博客
09-01 2257
关于 vue 项目开启 gzip 压缩方案总结 需求描述: 最近写的 vue 项目涉及到了项目整体性能优化问题，从加载的性能上讲，gzip压缩显得很有必要： zip 文件是可以服务端生成的： nginx 有一个模块是 gzip 模块，然后你只要开启了，nginx就会帮你来把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压，然后在进行代码的读取，其实这一步就是节约带宽，减少传输的代码包的数量。从而节约传输时间。然后网站就能很快打开了。 node也有相关于 compression 的库
vue项目开启Gzip压缩和性能优化操作
01-18
vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步：在vue项目中安装依赖并将productionGzip改为true，开启Gzip压缩： npm install –save-dev compression-webpack-plugin 第二步：运行 npm run build打包项目，这时可能会报错，提示ValidationError: Compression Plugin Invalid Options。 根据官网提示，需要将CompressionWebpackPlugin的设置由asset改为filename。 第三步：再次运行 npm run buil
vue2 配置 gizp压缩
laowangzia的博客
05-24 347
背景：公司项目比较庞大，注册用户很多，所以静态资源加载就成了一个亟待解决的问题，这里主要交代配置 gzip。看你打完包的资源里是不是用 gz 结尾的文件 有就是配置成功了。
vue2项目gzip加速
最新发布
javaMylife的博客
08-23 276
找到生效的webpack配置文件。
【VUE】vue配置Gzip压缩
LuviaWu的博客
07-17 2674
安装compression-webpack-plugin npm install compression-webpack-plugin --save-dev vue.config.js配置Gzip压缩 // 导入compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plug...
vue-webpack代码混淆、代码压缩设置
javaMylife的博客
08-03 1298
压缩为gz包后，是否删除源js文件，如果设置为true nginx需要额外配置资源文件目录。只需要第一个插件即可，后边两个可以有可以没有。可以在这个网站测试自己需要的混淆方式。
vue如何开启gzip压缩
柑橘乌云_
11-20 846
因为我们Nginx开起来实时压缩，也就是说如果前端没有做gzip压缩直接部署，那么Nginx也会实时压缩成gzip并发给浏览器。下方两个图一个是我下载了 vite-plugin-compression 压缩打包的项目另一个是并未下载插件和打包，但是这两个项目都用了Nginx。需要注意的是，Gzip 压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的 1/3。前端项目，打包出的 js，css资源，非常适合使用 gzip 进行压缩。Gzip 是一种压缩算法，在网络传输中使用非常普遍。
Vue CLI3 开启gzip压缩文件的方式
01-19
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件： npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置： 压缩...
nginx-1.18.0已开启gzip压缩优化vue项目大小.zip
10-22
启用gzip压缩后，Nginx会在响应发送到客户端之前对内容进行压缩，这显著降低了网络传输的数据量。在Nginx配置中，可以通过在http、server或location块内添加以下指令来开启gzip压缩： ```nginx gzip on; gzip_types...
Vue 项目开启gzip
qq_30193097的博客
09-01 3025
2、 对 webpack 配置打包压缩，并在服务端加上支持gizp的配置，当浏览器请求时，服务端直接将资源返回给浏览器。1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器。第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）第一种是服务端进行实时压缩，对服务器的性能消耗较大。首先，安装 compression 插件。如下图，看到响应头中出现。
记录一次vue2打包配置，cdn引入，gzip压缩
weixin_54889564的博客
01-11 559
【代码】记录一次vue2打包配置，cdn引入，gzip压缩。
vue2项目打包压缩处理
不会写代码的前端
01-17 1618
vue2打包优化
vue前端性能优化之分包策略、异步组件、Gzip压缩
dai556688的博客
04-18 3855
项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步，也是最关键的一步，做一个项目并不是单单完成功能就算结束了，作为开发者，更要站在用户角度去进行项目体验，响应快速的程序交互会直接提升程序的印象分。反之，如果页面间的交互响应缓慢、时常卡顿，无论程序功能再多再强大，让人很难去想去体验第二次。这个时候，性能优化尤为重要。
vue 项目优化上线以及如何开启gzip压缩
彭于晏的博客
02-13 925
vue 项目优化上线以及如何开启gzip压缩
vue项目开启Gzip压缩
weixin_33806300的博客
12-26 882
2019独角兽企业重金招聘Python工程师标准>>> ...
vue项目开启gzip压缩
z750467878的博客
11-22 2382
vuecli项目使用compression-webpack-plugin实现gzip压缩（nodejs版本）
vue项目打包使用gzip
qq_41713136的博客
11-08 818
vue gzip
vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
HeMister的博客
01-17 456
【代码】vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
Vue项目性能优化、开启gzip
m0_71071209的博客
07-10 585
Gzip 压缩是一种简单、有效且广泛使用的前端性能优化技术，可以带来多方面的好处。
vue gzip压缩
09-06
Vue.js是一个流行的JavaScript框架，它可以用于构建用户界面。当涉及到Vue.js应用程序的gzip压缩时，可以通过服务器端的配置来实现。在配置文件中，可以设置开启gzip、缓冲区大小、压缩等级以及需要压缩的文件类型。这样，当浏览器发送请求时，服务器会实时对相应的文件进行gzip压缩，并在响应头中携带gzip压缩配置信息。通过查看响应头的Content-Encoding字段，可以判断gzip压缩是否已生效。如果Content-Encoding字段中的值为gzip，表示gzip压缩已经生效；而如果Etag字段中的值带有W/前缀，表示启用了在线压缩。所以，通过配置服务器端和查看响应头的字段，可以实现Vue.js应用程序的gzip压缩。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue打包时gzip压缩的两种方案](https://blog.csdn.net/Dragonfly_w/article/details/121760909)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值