美文网首页
Nginx开启Gzip优化网页访问速度

Nginx开启Gzip优化网页访问速度

作者: grey_sky | 来源:发表于2020-10-23 15:20 被阅读0次

    前言

    开启Nginx Gzip 优化网页加载速度
    不限于Vue项目,所有前端皆可开启gzip优化
    如果是Vue项目可以直接打包出来gz文件,这样可以省去nginx动态压缩占用的cpu

    • Nginx 1.16.x
      • --with-http_gzip_static_module 模块 [可选]
    • Vue 3.x / Vue2.x

    Nginx 增加Gzip配置

    # 开启Gzip
    gzip_static on;
    gzip on;
    # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
    gzip_min_length 10k;
    # 设置压缩所需要的缓冲区大小
    gzip_buffers 16 64k;
    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;
    # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
    gzip_comp_level 5;
    gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/png;
    # 是否在http header中添加Vary: Accept-Encoding,建议开启       
    gzip_vary on;
    

    开启Vue Gzip打包

    安装 compression-webpack-plugin

    npm compression-webpack-plugin --save-dev
    

    config/index.js

    build: {
      productionGzip: true,
      productionGzipExtensions: ['js', 'css'],
    }
    

    webpack.prod.conf.js

    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 1024, // 10K以上进行压缩
         deleteOriginalAssets: false, // 是否删除原文件
          minRatio: 0.8 //压缩率达到20%才会压缩
        })
    

    如果是 vuecli3

    const CompressionPlugin = require("compression-webpack-plugin")
    module.exports = {
    ...
      configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
              new CompressionPlugin({
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                threshold: 10240, // 10K以上进行压缩
                deleteOriginalAssets: false, // 是否删除原文件
                minRatio: 0.8 //压缩率达到20%才会压缩
              })
            ]
          }
        }
      }
    }
    

    原文地址&更多文章:http://www.idmiss.com/646

    相关文章

      网友评论

          本文标题:Nginx开启Gzip优化网页访问速度

          本文链接:https://www.haomeiwen.com/subject/uukvmktx.html