Antd React UMI 配置优化 - 优化打包体积，提高打包速度

最新推荐文章于 2024-05-21 23:44:13 发布
最新推荐文章于 2024-05-21 23:44:13 发布
阅读量2.3k 收藏 3
点赞数
分类专栏： 前端开发 IT管理 文章标签： javascript 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43805705/article/details/128182499
版权

随着项目越来越大，打包后的体积很大，打包时间也很长，部署一次基本上要等十分钟左右。那么如何来优化打包体积和提高打包速度呢？一起来看看吧～

优化前打包体积分析

优化前个模块体积：

通过脚本命令：npm run analyze

可以看到总的parsed打包体积为 27.92MB, gizped 后也有 8.07MB。 再看每个chunk，可以发现有很多公共的模块出现在多个chunk里面，找到了问题所在。

最低0.47元/天 解锁文章
高阳很捷迅
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记react中antd打包的坑体积太大和className命名
好好学习
11-26 8129
前端使用antd的时后打包体积太大， 如图1.6M还是挺大的，把antd所有的资源都加载进入了 根据antd 官网的推荐，按需加载方式居于.babel配置 这样再来看看打包分析的 按需加载打包了button和layout 在src文件下也只引用了这个两个组件 这样做很方便的，同时要在entry这里在添加一个antd就不对了, 又把整个antd打包进来了， 这样就不对了 entry: { ...
React项目打包 优化详解
weixin_58207509的博客
11-21 2497
项目打包和优化-项目打包 目标：能够通过命令对项目进行打包 步骤： 在项目根目录打开终端，输入打包命令：npm run build 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中 项目打包和优化-项目本地预览 目标：能够在本地预览打包后的项目 步骤： 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
React + Antd + Wepack 项目体积优化记录（一期）
最新发布
b826604005的博客
05-21 854
Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。
UmiJs - 拆包优化
Zong_0915的博客
06-16 2530
我们在写前端代码的时候，难以避免的是，我们可能引入的依赖越来越多。那么随之而来的，我们打包编译后的产物，也会随之越来越大。默认情况下，使用Umi框架的人都知道，Umi会将前端页面，凡是用到的依赖都给打包到umi.js文件。同样地，CSS相关的则打入umi.css文件中。那当你的项目达到一定规模或者复杂程度上去的时候，尤其是umi.js文件就会很大。因此本篇文章主要分享一下拆包的经验。
umi黑科技：把静态文件打包进静态网页中:P
llsixly
08-08 857
为了能够跨平台通用，我现在很多工具都需要用JS进行开发。比如我之前研究了半天的JS版本的报表工具。但是这其中有个问题我没办法解决，就是有一些设置信息或者是模板文件需要一起打包进静态的页面中。今天解决了这个问题，记录一下方法。
Umijs项目优化
看陌生的风景的博客
10-30 717
首先通过npm run analyze 查看打包后的文件进行观察，哪些包的体积大，然后分解开。体积较大的文件:echarts、wangeditor、antd、moment.js、需要开启mfsu,umi 版本 “umi”: “^3.5.41”,5.lodash替换方案lodash-es。package.json 文件配置。.umirc.ts配置文件。
记react ant-design-pro 打包优化
learning_ever的博客
09-14 595
ant-pro打包优化
基于umi+antd-mobile的移动端项目模板
02-22
在"基于umi+antd-mobile的移动端项目模板"中，这些组件可以直接被引入，大大减少了开发者的代码量，提高了开发效率。 在实际使用这个模板时，开发者会发现其文件结构清晰，通常包括src目录、public目录、.umi目录...
umi-dva-antd-mobile：基于umi + dva + antd-mobile快速构建H5 APP应用
02-06
umi-dva-antd-mobile 该项目主要以 + 为一体框架，以为UI组件库，包含完整的前端工程化实践。 部分代码及功能参考于 :clapping_hands:已经支持微信开发，相见分支。 目录结构 |-- config # umi 配置，包含路由，...
umi-dva-antd-mobile-starter:Umi3.js和Ant Design Mobile入门
04-29
umi-dva-antd-mobile-starter 开始使用Umi.js和Ant Design Mobile。入门安装依赖项。 yarn 启动开发服务器。 yarn start 精简生产。 yarn build 精打细算为发展而建设。 yarn dev执照麻省理工学院
webpack+react+antd脚手架优化的方法
08-27
本篇文章主要介绍了webpack+react+antd脚手架优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
umi-antd-pro-antd-pro.zip
08-06
"umi-antd-pro-antd-pro" 这个压缩包文件名可能代表了一个包含完整 Ant Design Pro 示例或模板的项目，其中可能包含了项目的源码、配置文件、公共资源和测试用例等。解压后，开发者可以查看这些文件来了解 Ant ...
umi-dva-antd-starter-master-main.zip
10-21
《umi-dva-antd-starter-master-main.zip》是一个前端开发的项目压缩包，主要基于umi、dva和Ant Design这三个核心技术栈构建。这个压缩包包含了一个完整的项目框架，为开发者提供了一个快速启动新项目的起点。 umi...
最近webpack优化的一些总结
goutinga的博客
03-31 3569
前言 最近优化了一些webpack项目的构建体积与速度，结合公司做的一些默认配置，大部分应用打包速度已经快到飞起，在这记录一下自己和公司做的一些webpack优化。 过程 帮助我们分析的插件 下载 webpack-bundle-analyzer 和 speed-measure-webpack-plugin npm i webpack-bundle-analyzer speed-measure-webpack-plugin webpack-bundle-analyzer webpack-bundle-a
umi 分包
moozixiao的博客
04-17 6631
umi 分包 简介 Umi 是蚂蚁金服推出的一个围绕React技术栈的底层前端框架， 配合antd的UI组件库能极大的提高项目开发效率。 官网地址 umi 拆包 简的来说在 umi 框架中，我们会用到其他的组件库（类如：antd，moment，echarts等），当我们打包构建时，可以看到 umi.js 3M多 的包超大，它把其它组件的都集成到了 umi.js 中了，这样就会造成项目运行耗时长的影响。 使用 analyze 指令运行（使用 cross-env 运行，说明在下个标题： cross-e
webpack: react+umiJS框架配置打包体积可视化
咕咚在否的博客
07-17 1450
场景：打包出来单个js文件体积过大，网页加载太慢，尤其是包含图表的页面。 安装umi-webpack-bundle-analyzer 关于webpack-chain：通过 webpack-chain 的 API 扩展或修改 webpack 配置 npm install --save-dev umi-webpack-bundle-analyzer 在.umirc.js或config/config.js中配置： // config.js let BundleAnalyzerPlugin =...
react项目如何打包优化
m0_52765288的博客
11-22 2922
1.查看打包命令 2.运行打包命令 我的是 ` npm run build` 3.项目打包和优化-项目本地预览 目标：能够在本地预览打包后的项目 步骤： 1. 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 2. 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器 3. 在浏览器中访问：http://localhost:3000/ 预览项目 4. 项目打包和优化-打包体积分析 目标：能够..
webpack学习之对比 umi 和 create-react-app的打包流程和优化配置
weixin_33801856的博客
03-24 4235
[toc] 对外配置文件对比 umi .umirc.js // ref: https://umijs.org/config/ export default { treeShaking: true, plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html ['umi-plugin-react', { ...
umi-plugin-react
07-28
umi-plugin-react是一个可插拔的企业级React应用框架的插件集，它集成了一些常用的进阶功能。通过在项目中添加该插件集，可以实现一些高级功能，如antd的使用和dva插件的开启。安装umi-plugin-react可以通过使用cnpm install umi-plugin-react --save-dev命令来进行安装。然后在配置文件config/config.js中引入该插件，并按需配置相应的功能。例如，可以通过配置antd: true来开启antd的使用，通过配置dva: true来开启dva插件的使用。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [使用umi脚手架来初始化React项目](https://blog.csdn.net/wwf1225/article/details/122957886)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值