奥丁9

后端
- 数据库
  - redis
  - mysql
  - mongoDB
  - 达梦
- php
  - laravel
    - laravel-admin
    - dcat
      - 表单
      - 表格
- java
  - spring
- python
- go
- c
- c++
前端
- vue
- nodejs
- sass/less
- html/css
- 前端框架
- javascript
- 微信生态
  - 公众号
  - 小程序
- uniapp
- typescript
其他
- AI
- 数据结构
- 安全
- linux
- seo
- git
- 健身
- 算法
- 正则表达式
- docker
待分类

前端 / vue

vue项目配置nginx开启gzip压缩

3周前 aoding9 8

vue 前端 nginx

# vue安装依赖
npm i compression-webpack-plugin@5.0.1 --save-dev

`vue.config.js`

```js
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const compress = new CompressionWebpackPlugin({
  filename: info => {
    return `${info.path}.gz${info.query}`
  },
  algorithm: 'gzip',
  threshold: 10240,
  test: new RegExp('\\.(' + ['js'].join('|') + ')$'),
  minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  deleteOriginalAssets: false // 是否删除原文件，测试发现nginx虽然返回gz文件，但是源文件仍旧需要保留
})

module.exports = {
    ...
      configureWebpack: {
          ...
          plugins: [compress]
      }
},
```

# nginx在http块添加配置
```nginx
http{
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
......
```

重载配置`sudo nginx -s reload`

参考：
https://juejin.cn/post/7145651819438899230

https://wangrunze.com/5.html

https://blog.csdn.net/leftfist/article/details/125614805

本作品采用《CC 协议》，转载必须注明作者和本文链接