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这个可以成功,其他可以用来以后参考)

项目经过webpack打包后会生成一个dist文件夹,其中包含了经过处理和压缩后的最终产物。dist文件夹下的内容是部署到服务器或发布到线上环境的静态资源文件。 dist文件夹的结构取决于webpack的配置以及项目的需求。通常它会包含一个或多个JS文件,包括应用的逻辑代码和依赖的第三方库,以及一个或多个CSS文件,包含项目的样式代码。此外,还会包含一些字体文件、图片或其他静态资源,这些文件在构建过程中被处理并复制到dist文件夹中。 在项目开发过程中,dist文件夹不会被直接修改,而是由webpack根据配置和源代码生成。webpack处理过程中会进行代码的压缩、合并、混淆等操作,以减小文件大小并提高加载速度。此外,webpack还会处理一些前端框架或工具的特定需求,例如处理jsx代码、提取公共模块等。 通过打包后的dist文件,我们可以快速查看打包后的效果,验证代码是否正确地被处理和运行。同时,dist文件也是发布项目到线上环境的基础,我们可以将dist文件夹中的内容直接上传到服务器进行部署,并通过浏览器访问项目的最终版本。 总的来说,dist文件夹是经过webpack处理后的项目产物,包含了所有打包后的静态资源文件。它具有优化过的代码和资源,适合部署和发布到线上环境使用,能够提供更好的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值