• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue cli4 开启gzip压缩 nginx开启gzip

vue cli目前还没有自带这个功能,需要安装一个webpack的插件:

插件安装

yarn add compression-webpack-plugin

更新:2020-12-17

千万不要安装最新的7.0版本,会报错,而且目前没有人提供解决方案,我这里提供两个版本,大家自行选择安装

稍微新一些的

yarn add compression-webpack-plugin@6.1.1

旧的

yarn add compression-webpack-plugin@4.0.0

使用这两个版本不会出现报错,个人亲测

配置

安装完打开vue的配置文件vue.config.js,和package.json文件同级,没有就手动创建。

里面内容如下:

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.(js|css)$/,// 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false, // 不删除源文件
            minRatio: 0.8 // 压缩比
          })
        ]
      }
    }
  }
}

有需要可以自定义配置,然后打包项目,你会发现js文件夹里面会出现很多gzip压缩包。

nginx配置

直接在nginx的配置文件里加上这句gzip_static on; # 开启 gzip 压缩

这句话如果是宝塔的话,直接在配置文件的第一个大括号最后面书写就行了。

vue cli4 开启gzip压缩 nginx开启gzip

查看是否开启gzip

项目上传到网站后,可以刷新网站,查看js文件的头信息,其中请求头信息中有这么一句话:

请求头信息

Accept-Encoding : gzip, deflate

响应头信息

Content-Encoding : gzip

火狐浏览器两个都可以看到,谷歌的只能看到响应头,只要有对应的信息就说明gzip开启成功,gzip差不多可以节省一半的大小从而减少带宽的负担,开一开也没啥不行。

1

相关文章

微信收款码
微信收款码