umi 打包后体积太大了 - Githubissues

umijs / umi

A framework in react community ✨

https://umijs.org

MIT License

15.25k stars 2.65k forks source link

umi 打包后体积太大了 #4535

Closed ho-studio closed 4 years ago

ho-studio commented 4 years ago

是我们哪里做的不对吗，使用 Ant Design Pro，我看 Ant Pro 默认已经配置了按需加载，打包后 umi 体积居然有 2.5M，即使是宽带条件下，2.5M也太大了，一般来说控制在1M以下比较合适。有什么办法缩小打包体积呢, umi 相关引用如下：

    "umi": "^2.8.7",
    "umi-plugin-react": "^1.9.5",
    "umi-request": "^1.0.8",

librz commented 4 years ago

我也是，开了dynamicImport降到1.4M, 页面加载时间15秒, 最后没办法想配SSR，告诉我SSR还在Beta...

xiaohuoni commented 4 years ago

2.5M 服务端开gzip也就1M左右。不算大。

ho-studio commented 4 years ago

@xiaohuoni 如果服务端不开 gzip，你怎么配置减小到1.4M的，dynamicImport 我这边配了无论怎么修改 level 参数，打包后的 umixxx.js 体积完全没有变化，影响的是应用的js代码体积。

leftstick commented 4 years ago

这个，是不是应该提供一些有信息啊？譬如：

开启分析后的分析图谱，到底什么东西影响了最终的体积？
可复现的最小repo

凡是有助于大家帮你分析的问题的东西，都整理整理明白（或许整理分析的过程中，你就自己解决问题了），然后拿出来讨论更好一些。你这样没头没脑来一句『体积太大』，别人即使有心也无力啊。

shuyzhou commented 4 years ago

我也是，umi-plugin-react里antd为true,配置了按需加载。但开了分析图谱里@ant-design/pro-layout 占了900多k，我只引入了default和pageloading和defaultfooter。

CrazyOctopusDan commented 4 years ago

这个，是不是应该提供一些有信息啊？譬如：

开启分析后的分析图谱，到底什么东西影响了最终的体积？

可复现的最小repo

凡是有助于大家帮你分析的问题的东西，都整理整理明白（或许整理分析的过程中，你就自己解决问题了），然后拿出来讨论更好一些。你这样没头没脑来一句『体积太大』，别人即使有心也无力啊。

使用analyze工具呈现出来的包的体积分析不知道您看过没，的确就只有一块很大面积的模块显示的是umi.hash.js，体积大小2.5MB，无法再进一步分析了；
这个不需要最小repo啊，只要是用了umi框架或者是antdpro框架的，哪怕新创建的项目，只要打包完就可以看见了这个体积巨大的主包了。

Thyiad commented 3 years ago

是的，太大了！

KingThq commented 3 years ago

老铁们，这个问题有没有解决

darrenliuwei commented 3 years ago

每一次打包体积都会变大一点，你们有遇到吗？

darrenliuwei commented 3 years ago

vendors.87afa2c2.async.js 这个是做什么的呀？为什么这么大呀？

sorrycc commented 3 years ago

vendors 是公共依赖，大是自然的，通过 ANALYZE=1 环境变量分析下吧。

darrenliuwei commented 3 years ago

umi

index.js真的是太大了，这个项目有时候删除几行代码，打包之后，大小就会增加几M

Thyiad commented 3 years ago

@darrenliuwei 你这不是引用某个库，这个库比较大的原因吗？嫌大你就别用这个react-file-viewer了嘛

darrenliuwei commented 3 years ago

@darrenliuwei 你这不是引用某个库，这个库比较大的原因吗？嫌大你就别用这个react-file-viewer了嘛

按理说库的大小应该是固定的吧？比如我增加一行代码然后打包，或者是删除一行代码然后打包，结果都会增加几M大小，假如打包一百次，那最后就是几百M大小了/(ㄒoㄒ)/~~

sorrycc commented 3 years ago

@darrenliuwei 感觉是你理解有误。

darrenliuwei commented 3 years ago

@darrenliuwei 感觉是你理解有误。

第一次用umi.js，所以即便是每次删除一些代码，然后打包之后的体积都会不断增加几M？这个是正常现象吗？

darrenliuwei commented 3 years ago

@darrenliuwei 感觉是你理解有误。

第一次用umi.js，所以即便是每次删除一些代码，然后打包之后的体积都会不断增加几M？这个是正常现象吗？

同事无意之间把打包之后的文件夹删了，然后压缩包删了之后，再进行打包，体积又恢复了，之后又进行了几次打包测试，发现大小不再疯狂增加了。好像自己好了？！虽然无意之间自己好了，但是还是没弄明白问题出在哪里了

my9988 commented 3 years ago

vendors 是公共依赖，大是自然的，通过 ANALYZE=1 环境变量分析下吧。

我觉得不能简单说是自然的，应该的，这个包确实有点大，我弄完了部署了才发现问题的严重性，我这个系统准备很多国家访问，好慢啊。以前用jquery时包很小，听说react好，就弄了，没想到好不如意 @sorrycc

onsummer commented 3 years ago

完全无引入的空项目，只写了俩路由，用 webpack5 打包的，umi.js 这个文件也有 500多KB，属实有点大，经分析后里面还塞了一个 antdesign....

$1B{6@ U_ B(FU$ICRXC~{4$

mschenhe commented 2 years ago

大佬，这个问题解决了吗

angelporo commented 2 years ago

这个问题好像没有解决,我打包出来132mb+ 不使用mfsu 10M+

jinmingpang commented 2 years ago

这个问题好像没有解决,我打包出来132mb+ 不使用mfsu 10M+

越说越玄幻。还能出一个132MB...

xiaohuoni commented 2 years ago

基础 umi.js 最小尺寸就有300k。是因为加了补丁（不加少100k左右，没试过，猜的数据）。

lyy199212 commented 2 years ago

项目里没用到antv 怎么在打包的时候删除这个包呢

chenxlkamino commented 2 years ago

项目里没用到antv 怎么在打包的时候删除这个包呢

是不是引入了@antd-design/charts这个包啊

Zlt1012 commented 2 years ago

请问，问题解决了嘛？我也遇到了相同的问题

chenxlkamino commented 2 years ago

您的邮件已经收到，我会尽快给您回复-------陈孝亮祝您生活愉快！

chenxlkamino commented 2 years ago

请问，问题解决了嘛？我也遇到了相同的问题

我是对@antd-design/charts做按需加载了，具体方式可以参考@antd-design/charts QA，之后体积就小了不少，如果umijs体积太大，可以试着拆包。

xiaorong61 commented 1 year ago

请问，问题解决了嘛？我也遇到了相同的问题

你这是没开动态拆分加载吧，打包到了一个文件。

chenxlkamino commented 1 year ago

您的邮件已经收到，我会尽快给您回复-------陈孝亮祝您生活愉快！