前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Gzip在vue cli3中的使用方式

Gzip在vue cli3中的使用方式

作者头像
kirin
发布2021-02-26 11:02:32
1.2K0
发布2021-02-26 11:02:32
举报
文章被收录于专栏:Kirin博客

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

我们可以借助 ompression-webpack-plugin 来实现gzip压缩。 安装:

代码语言:javascript
复制
npm i compression-webpack-plugin -D

vue.config.js中的配置

代码语言:javascript
复制
const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
...
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
            threshold: 10240, // 归档需要进行压缩的文件大小最小值,我这个是10K以上的进行压缩
            deleteOriginalAssets: false, // 是否删除原文件
            minRatio: 0.8
          })
        ]
      }
    }
  }
}

对比下图,红色是压缩前,绿色是压缩后

Gzip在vue cli3中的使用方式-麒麟博客
Gzip在vue cli3中的使用方式-麒麟博客

压缩对比图

前端配置完毕,然后再去配置服务器开启Gzip功能,详细请翻阅其他资料。

全部完成后,再访问网页,就能看到请求文件的Response Headers中多了一行 content-encoding: gzip

Gzip在vue cli3中的使用方式-麒麟博客
Gzip在vue cli3中的使用方式-麒麟博客

作者:locky丶 链接:https://www.jianshu.com/p/d765b4cda63b 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档