vue2 进行gzip压缩

已于 2022-02-10 09:39:46 修改
阅读量1.6k 收藏 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检验一下是否配置成功，如果配置没有问题打包结果与下图应该是比较类似的：

在这里插入图片描述

前端一枚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue CLI3 开启gzip压缩文件的方式
01-19
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。 webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件： npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置： 压缩前后大小大致如下： 生成的压缩文件以.gz为后缀： 一般浏览器都已支持.gz的资源文件，在http请求的Request Headers
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
Vue性能优化--gZip
最新发布
Schaffer的博客
03-29 1029
gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实际应用中，并不是对所有文件进行压缩，通常只是压缩静态文件。
解决vue-cli webpack打包开启Gzip 报错问题
10-16
主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue打包如何开启gzip压缩
baidu_21349635的专栏
04-26 964
本人前端打包的js达到了6.9M,导致网站加载很慢，想了下可以用gzip的方式压缩，减少文件大小。从6M压缩到了1M多，网站加快了很多。在sever中加入下面的代码。
vue 项目优化上线以及如何开启gzip压缩
qq_35452726的博客
02-13 858
vue 项目优化上线以及如何开启gzip压缩
Vue 项目开启gzip
qq_30193097的博客
09-01 1584
2、 对 webpack 配置打包压缩，并在服务端加上支持gizp的配置，当浏览器请求时，服务端直接将资源返回给浏览器。1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器。第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）第一种是服务端进行实时压缩，对服务器的性能消耗较大。首先，安装 compression 插件。如下图，看到响应头中出现。
vue前端性能优化之分包策略、异步组件、Gzip压缩
dai556688的博客
04-18 3472
项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步，也是最关键的一步，做一个项目并不是单单完成功能就算结束了，作为开发者，更要站在用户角度去进行项目体验，响应快速的程序交互会直接提升程序的印象分。反之，如果页面间的交互响应缓慢、时常卡顿，无论程序功能再多再强大，让人很难去想去体验第二次。这个时候，性能优化尤为重要。
记录一次vue2打包配置，cdn引入，gzip压缩
weixin_54889564的博客
01-11 462
【代码】记录一次vue2打包配置，cdn引入，gzip压缩。
【VUE】vue配置Gzip压缩
LuviaWu的博客
07-17 2632
安装compression-webpack-plugin npm install compression-webpack-plugin --save-dev vue.config.js配置Gzip压缩 // 导入compression-webpack-plugin const CompressionWebpackPlugin = require('compression-webpack-plug...
vue如何开启gzip压缩
柑橘乌云_
11-20 592
因为我们Nginx开起来实时压缩，也就是说如果前端没有做gzip压缩直接部署，那么Nginx也会实时压缩成gzip并发给浏览器。下方两个图一个是我下载了 vite-plugin-compression 压缩打包的项目另一个是并未下载插件和打包，但是这两个项目都用了Nginx。需要注意的是，Gzip 压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的 1/3。前端项目，打包出的 js，css资源，非常适合使用 gzip 进行压缩。Gzip 是一种压缩算法，在网络传输中使用非常普遍。
nginx-1.18.0已开启gzip压缩优化vue项目大小.zip
10-22
vue-element-admin 打包gzip压缩优化vue项目大小并部署到Nginx
vue2-transitions::sparkles:可重复使用的Vue 2过渡组件
05-02
Vue2-transitions非常简单，可让您仅导入应用程序所需的过渡每个过渡组件都有〜2kb （未压缩的js + css或gzip压缩后的〜400字节），您只能导入真正需要的组件。 可配置的。 您可以通过props配置动画的进入和离开时...
Vue项目打包压缩的实现(让页面更快响应)
11-21
　我的一个小项目，仅有三四个页面，但因为服务器带宽太小了，加载时间过长的问题尤为明显，于是采用路由懒加载和gzip压缩的方式优化了一下，访问速度得到了显著提升。 一、路由懒加载：分割代码块 　Vue支持异步...
在Apache服务器上启用GZip压缩静态内容的方法
01-20
为了优化网站的访问速度，我们可以通过对静态内容进行压缩，从而减少网页加载的时间，大大节省用户的带宽。在这篇文章中，我将介绍如何使用Apache和.htaccess文件进行静态内容压缩。 首先让我介绍一下，我们可以使用...
v-money-货币的微小（小于2k压缩）输入/指令掩码-Vue.js开发
05-27
2KB gzip压缩）无依赖关系移动式支持组件或指令风味接受复制/粘贴可编辑对于其他类型的蒙版，请使用vue-the-mask用法A。从“ vue”全局导入Vue从“ v-money”导入钱//注册指令v-money和组件 Vue.use（money，{...
vue项目如何开启gzip压缩
mingtian18的博客
12-08 5372
vue项目开启gzip压缩
Vue使用CDN与GZIP打包部署优化
LauSET的博客
04-02 738
Vue使用cdn加速与gzipu压缩实现打包优化前言一、CDN1.cdn方式引入2.修改config3.修改引入方式二、GZIP1.配置2.Nginx配置3.压缩效果总结 前言 当我们前端使用了大量组件和页面之后，打包会导致项目体积过大，这时候部署后访问有时候就会出现首页喧染慢等一些尴尬而又急人的情况。这个时候我们就需要对项目进行优化，例如uniapp可以分包加载，vue则可以cdn加载三方插件与gzip压缩js文件 一、CDN CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下
vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
HeMister的博客
01-17 394
【代码】vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
vue gzip压缩
09-06
这样，当浏览器发送请求时，服务器会实时对相应的文件进行gzip压缩，并在响应头中携带gzip压缩配置信息。通过查看响应头的Content-Encoding字段，可以判断gzip压缩是否已生效。如果Content-Encoding字段中的值为gzip...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值