阅读 103

Vue优化可操作手册

开启 Gzip

原文地址:https://www.mulingyuer.com/archives/422/
复制代码

Vue-Cli4 开启gzip压缩 nginx开启Gzip

yarn add compression-webpack-plugin@6.1.1
复制代码

配置

  • 配置文件 vue.config.js
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 压缩

查看是否开启gzip

请求头信息:
Accept-Encoding : gzip, deflate

响应头信息:
Content-Encoding : gzip
复制代码

实际效果截图

image.png

image.png

文章分类
前端
文章标签