使用compression-webpack-plugin进行vue项目 压缩js打包

23 篇文章 0 订阅
3 篇文章 0 订阅

app内嵌的h5访问过慢,大约6秒,是js文件也慢
可以进行
1)路由懒加载
2)忽略插件语言包
最后来压缩。访问大概2秒

1.安装,比较稳定且打包不会报错

npm i compression-webpack-plugin@5.0.1

2.vue.config.js使用

deleteOriginalAssets: true这个属性是删除已经压缩的源文件,
使用了的确会使体积变小,但我部署后访问页面空白
出现了SyntaxError: Unexpected token <
如果执意要用,可以参照以下解决方法
https://stackoverflow.com/questions/54082652/webpack-gzip-bundle-uncaught-syntaxerror-unexpected-token

 // 打包压缩
    config.plugin('CompressionPlugin').use(
      new CompressionPlugin({
        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
        algorithm: 'gzip', // 使用gzip压缩
        test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8, // 压缩率小于0.8才会压缩
        // deleteOriginalAssets: true
      })
    ) chainWebpack: config => {
}

3.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]\.";
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值