ant-design 目前使用Result时无法避免引入403 404 500状态图标

ryhaxcpt  于 5个月前  发布在  其他
关注(0)|答案(5)|浏览(69)

What problem does this feature solve?

目前 import {Result} from 'antd' 会引入三个比较大的SVG图标(noFound.tsx、serverError.tsx、unauthorized.tsx),压缩后依然占用超过15KB的体积。后续 antd 如果支持更多内置错误状态,想必还会占用更大体积。

目前的API设计导致即使用不上这些图标也无法被自动tree-shake掉,只能用比较hack的方式强行从包体里面删掉:

// vite.config.js
export default defineConfig(() => ({
    ...
    resolve: {
        alias: [{
            find: /^(\.\/(?:noFound|serverError|unauthorized))$/,
            replacement: '$1',
            customResolver: (source, importer, options) => {
                if(importer && /\/node_modules\/antd\/es\/result\/index\.js$/.test(importer)) {
                    return resolve(__dirname, 'src/empty.js');
                }
                return null;
            },
        }],
    },
}));

// src/empty.js
export default null;

What does the proposed API look like?

可以将这几个带有图标的组件和用户自定义图标的组件提取成不同的Component,例如:

  • <Result status="403" /><Result.Error403 />
  • <Result icon={<SmileOutlined />} /><CustomResult icon={<SmileOutlined />} />

这样不需要内置图标的用户可以仅导入后者。

628mspwn

628mspwn1#

目前的 API 设计确实无法 tree shaking,你给的解决方案可以解决,不过为了不产生 break change 只能等到下一个大版本去改了。

wvyml7n5

wvyml7n52#

就是说感觉可以单独加一个不带icon版本的Result?就像上面给的这个例子,额外提供一个 <CustomResult> (或者别的什么名字),如果不需要图标就去import这个东西,老用户可以继续用原来的Result

cygmwpex

cygmwpex3#

目前的 API 设计确实无法 tree shaking,你给的解决方案可以解决,不过为了不产生 break change 只能等到下一个大版本去改了。

那 Empty 组件是不是也会有类似的问题? CC @xmcp

yvt65v4c

yvt65v4c5#

从包体大小上来看Empty没多大,Result里面这三个图标是最要紧的。

相关问题