vue-cli3+nginx配置gzip压缩

作者: deepwinter 分类: 前端 发布时间: 2019-05-24 14:42 点击量: 593 次阅读

原创文章,转载请注明出处,谢谢!


安装插件

npm i -D compression-webpack-plugin

修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

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

配置nginx

在nginx配置文件中增加如下配置:

location ~* \.(css|js)$ {
  gzip_static on;
}

这是 nginx 的静态 gzip功能,会自动查找对应扩展名的文件,如果存在 gzip 文件,就使用,如果没有就用原文件。

说明:
因为我们在构建的时候已经生成好了压缩文件,所以只需要开启nginx的静态gzip功能就可以。如果不在构建的时候压缩,nginx也可以压缩,配置方法可以参考我的另一篇文章:nginx开启gzip压缩


参考:https://www.jianshu.com/p/1738f9f092ee

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注