首页 > Web开发 > 详细

VUE项目打包压缩(compression-webpack-plugin)

时间:2021-08-20 15:41:26      阅读:27      评论:0      收藏:0      [点我收藏+]

环境

win10 x64
npm 6.14.13
node 14.17.3
vue 2.6.11

安装插件

cnpm install compression-webpack-plugin@1.1.12 -S

根目录新建配置文件 vue.config.js

const CompressionWebpackPlugin = require(compression-webpack-plugin)

  module.exports = {
      configureWebpack: {
          plugins: [
              new CompressionWebpackPlugin({
                  filename: [path].gz[query],
                  algorithm: gzip,
                  test: new RegExp(\\.(js|css)$),
                  threshold: 10240,
                  minRatio: 0.8
              })
          ]
      }
  }

Nginx配置(客户端支持的话,直接开启也可以压缩)

   gzip on; # 开启Gzip
    gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值,大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

 

 

打包成功

技术分享图片

压缩前

技术分享图片

压缩后

技术分享图片

 

VUE项目打包压缩(compression-webpack-plugin)

原文:https://www.cnblogs.com/xuanjiange/p/15165936.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!