Vue 配置 Gzip 压缩 开启压缩后踩过的坑

8 篇文章 0 订阅

vue配置compression-webpack-plugin插件
需要后台配合才可以实现ci方法
(1)vue-cli搭建的项目在config/index.js
vue-cli,config/index.js配置productionGzip为true
(2)打开CMD,执行>npm install --save-dev compression-webpack-plugn
(3)然后 cnpm run build
(4)对比可以看到打包的文件,体积有了明显的差别
(5)注意事项
错误的打包提示
上面会提示当前安装版本与当前项目下的webpack版本使用不匹配,需要安装对应的版本
(6)后台取compression-webpack-plugin官网看了一下历史版本,取了一个较低版本试了试。
果然是版本冲突
执行 >npm install --save-dev compression-webpack-plugin@1.11.2
然后打包成功。
希望能帮到各位码农同仁,给个好评呗

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue3中,可以通过在Nginx配置中启用gzip压缩来提高网站的性能。以下是一些关于Vue3 Nginx配置gzip压缩的信息: 1. 在Nginx配置文件中,可以使用以下指令来启用gzip压缩gzip on; 2. 可以使用以下指令来设置启用gzip压缩的最小文件大小: gzip_min_length 1k; 3. 可以使用以下指令来设置压缩所需要的缓冲区大小: gzip_buffers 16 64k; 4. 可以使用以下指令来设置gzip压缩针对的HTTP协议版本: gzip_http_version 1.1; 5. 可以使用以下指令来设置gzip压缩级别,数字越大压缩的越好,也越占用CPU时间: gzip_comp_level 3; 6. 可以使用以下指令来设置需要进行gzip压缩的文件类型: gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png; 7. 可以使用以下指令来在http header中添加Vary: Accept-Encoding: gzip_vary on; 8. 在Vue3中,可以使用compression-webpack-plugin插件来进行gzip压缩。可以通过以下步骤来安装和配置该插件: - 安装插件:npm i -D compression-webpack-plugin - 在vue.config.js文件中导入插件: const CompressionWebpackPlugin = require('compression-webpack-plugin') - 在configureWebpack选项中添加插件: configureWebpack: { plugins: [ new CompressionWebpackPlugin({ test: new RegExp('\\.(js|css)$'), threshold: 10240, deleteOriginalAssets: false }) ] } 以上是关于Vue3 Nginx配置gzip压缩的一些信息,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值