减小react+material ui生成的压缩文件或bundle.js文件的大小

在前端开发中,使用React和Material UI时,发现生成的bundle.js文件达到3MB。通过修改@material-ui/core和@material-ui/icons的引入方式,显著降低文件大小。具体做法是将import语句改为更具体的路径,如import xxx from '@material-ui/icons/xxx',此方法使文件从3MB降至600KB,表明icons模块是主要占用空间的部分。
摘要由CSDN通过智能技术生成

问题描述:

前端开发,使用react和matrial ui开发, 生成的打包文件,js文件的大小,竟然达到3M.

寻找减小打包文件的大小的方法。尝试了很多解决方案,都是减小100k左右,不能解决问题。

参考官网material信息:https://material-ui.com/guides/minimizing-bundle-size/

 

解决方案:

1. 修改 每个文件中@material-ui/core的引入方法,结果大小只减小了100k,杯水车薪。

将类似   import xxx from @material-ui/core 的引入写法,全部改为

import xxx from @material-ui/core/xxx的写法。也就是 引入core下面的路径,而不是 core这一层路径

例如把下面这行

import { Button, TextField } from '@material-ui/core';

改成

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

2.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值