vue2项目打包压缩处理

平常项目打包后,js等文件会体积大,这样用户访问会慢

webpack优化 -- compression-webpack-plugin 开启gzip

1、安装compression-webpack-plugin

这里我项目webpack版本是3.6.0,所以得安装低版本得compression-webpack-plugin,webpack版本高于这个得安装其他版本,不然会报错

复制代码
npm install [email protected] -D
2、修改配置
1、在config/index.js文件中修改productionGzip: true;
2、build/webpack.prod.conf.js文件中的plugins添加下面的代码
if 复制代码
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

最后打包就可以了

注意!!!后端服务器也记得配置可访问gz文件,不然都是404

效果如下

相关推荐
中微子几秒前
手写JavaScript Promise:深入理解异步编程的核心
前端
架构个驾驾1 分钟前
前端微服务框架深度对比:无界(Momentum)与乾坤(Qiankun)实战指南
前端·前端框架
前端小巷子2 分钟前
WebSQL:浏览器端的 SQL 数据库
前端·javascript·面试
Roger_zz2 分钟前
一个问卷调查的小思路
前端
Hilaku2 分钟前
用了三年 Vue,我终于理解为什么“组件设计”才是重灾区
前端·javascript·vue.js
HuYi_code2 分钟前
制作一个多层表头的实现
前端·vue.js
长弓三石3 分钟前
鸿蒙网络编程系列53-仓颉版TCP连接超时分析示例
前端·harmonyos
ShareJasmine3 分钟前
Vue将后端数据转成树形结构的方法
前端·vue.js
日升4 分钟前
AI 组件库-MateChat 高级玩法:多会话(四)
前端·ai编程·trae
快起来别睡了4 分钟前
# CSS 动画:从零到爆火,掌握现代网页动效的终极指南
前端·css·设计