WebPack的发布项目压缩

  1. 构建时gzip(这个方式是推荐的,而且在本次的react项目gz化中也是使用了该方式得以成功)
      用Webpack的压缩插件生成bundle.js.gz 代替生成bundle.js。 之后添加一个中间件返回被 gzip 压缩的JS文件
第一步:需要安装webpack压缩组件

Yarn add compression-webpack-plugin
或者
npm install compression-webpack-plugin

注意: 在使用compression-webpack-plugin的时候有一个版本问题,如果直接使用yarn add或者 npm install 的话,会默认安装到最新版本的,例如本次gz化时,默认的版本是^3.0.0这个时候会报以下的错误:

在这里插入图片描述
需要降低版本形式处理,如Yarn add compression-webpack-plugin@1.1.12,指定版本。

第二步: 在webpack.config.prod.js中引入插件

const CompressionPlugin=require('compression-webpack-plugin');

第三步: 添加到插件数组中(module.exports下的plugins中添加)

在这里插入图片描述

参考网址:

https://www.zcfy.cc/article/two-quick-ways-to-reduce-react-app-s-size-in-production-1930.html?tdsourcetag=s_pcqq_aiomsg
(有两种方法在里面,但是构建时gzip这个可以成功,其他可以用来以后参考)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值