木灵鱼儿

木灵鱼儿

阅读：3927

最后更新：2020/12/17/ 16:50:02

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差不多可以节省一半的大小从而减少带宽的负担，开一开也没啥不行。

文章分类 教程vue 项目实战
文章标签 vue开启gzip压缩nginx开启gzipgzipvue cli
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 5获得阅读 3927

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 5
文章被阅读 3927

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译