返回带有对象的函数时的 React tree-shaking 问题 [Typescript + React + Rollup]

如何解决返回带有对象的函数时的 React tree-shaking 问题 [Typescript + React + Rollup]

我花了很多时间让我的图书馆更容易摇晃，但无法解决一个特定的问题。我有多个看起来像这样的图标组件：

import * as React from 'react';

import createSvgIcon from '../utils/createSvgIcon';

export const Star = createSvgIcon(
    {
        regular: (
            <path d="M6.137 23.803L12 20.72l5.863 3.082c1.04.547 2.284-.332 2.082-1.512l-1.122-6.527 4.742-4.62c.852-.83.381-2.28-.794-2.45l-6.554-.955-2.93-5.94c-.524-1.059-2.045-1.072-2.574 0l-2.93 5.94-6.554.955c-1.175.17-1.646 1.62-.794 2.45l4.742 4.62-1.122 6.527c-.202 1.18 1.041 2.064 2.082 1.512zm11.44-2.584L12 18.289l-5.576 2.93 1.063-6.209-4.513-4.396 6.236-.906L12 4.055l2.79 5.653 6.236.906-4.513 4.396 1.063 6.209z" />
        ),solid: (
            <path d="M6.137 23.803L12 20.72l5.863 3.082c1.04.547 2.284-.332 2.082-1.512l-1.122-6.527 4.742-4.62c.852-.83.381-2.28-.794-2.45l-6.554-.955-2.93-5.94c-.524-1.059-2.045-1.072-2.574 0l-2.93 5.94-6.554.955c-1.175.17-1.646 1.62-.794 2.45l4.742 4.62-1.122 6.527c-.202 1.18 1.041 2.064 2.082 1.512z" />
        ),},'Star',);
export default Star;

createSvgIcon 看起来像这样：

import React from 'react';

import SvgIcon,{ SvgIconProps } from '../components/SvgIcon';

interface CreateSvgIconTypes {
    /**
     * Regular path for this icon
     */
    regular?: React.ReactNode;
    /**
     * Solid path for this icon
     */
    solid?: React.ReactNode;
}

export interface ExtendedSvgIconProps extends Omit<SvgIconProps,'children'> {
    /**
     * Solid version of this Icon (will throw an error if it doesn't exist)
     */
    solid?: boolean;
}

export default function createSvgIcon(
    { regular: regularPath,solid: solidpath }: CreateSvgIconTypes,displayName: string,) {
    let Icon = SvgIcon;
    const Component = ({ solid,...rest }: ExtendedSvgIconProps) => {
        if (!solidpath && !regularPath) throw new Error('There is no path specified for this icon');
        else if ((solid && !solidpath) || (!solid && !regularPath)) {
            throw new Error(
                `There is no ${displayName} of this type,please use one of those types :\n${
                    regularPath ? `- regular : <${displayName} />\n` : ''
                }${solidpath ? `- solid : <${displayName} solid/>\n` : ''}`,);
        }

        return <Icon {...rest}>{(solid && solidpath) || (!solid && regularPath)}</Icon>;
    };

    if (process.env.NODE_ENV !== 'production') {
        // Need to set `displayName` on the inner component for React.memo.
        // React prior to 16.14 ignores `displayName` on the wrapper.
        Component.displayName = `${displayName}Icon`;
    }

    return React.memo(Component);
}

这个组件在我的 esm.js 包中是这样的：

const Star = createSvgIcon({
    regular: (createElement("path",{ d: "M6.137 23.803L12 20.72l5.863 3.082c1.04.547 2.284-.332 2.082-1.512l-1.122-6.527 4.742-4.62c.852-.83.381-2.28-.794-2.45l-6.554-.955-2.93-5.94c-.524-1.059-2.045-1.072-2.574 0l-2.93 5.94-6.554.955c-1.175.17-1.646 1.62-.794 2.45l4.742 4.62-1.122 6.527c-.202 1.18 1.041 2.064 2.082 1.512zm11.44-2.584L12 18.289l-5.576 2.93 1.063-6.209-4.513-4.396 6.236-.906L12 4.055l2.79 5.653 6.236.906-4.513 4.396 1.063 6.209z" })),solid: (createElement("path",{ d: "M6.137 23.803L12 20.72l5.863 3.082c1.04.547 2.284-.332 2.082-1.512l-1.122-6.527 4.742-4.62c.852-.83.381-2.28-.794-2.45l-6.554-.955-2.93-5.94c-.524-1.059-2.045-1.072-2.574 0l-2.93 5.94-6.554.955c-1.175.17-1.646 1.62-.794 2.45l4.742 4.62-1.122 6.527c-.202 1.18 1.041 2.064 2.082 1.512z" })),'Star');

这不是摇树！即使手动添加 /*#__PURE__*/。即使不使用，也会导入每个图标。

原函数取自material-ui：https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/utils/createSvgIcon.js

并像这样使用：

import * as React from 'react';
import createSvgIcon from './utils/createSvgIcon';

export default createSvgIcon(
  <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />,'Add');

我真的认为主要问题是我们使用对象作为参数来创建SvgIcon，但我不知道为什么。

感谢您的帮助，我真的花了很多时间在这上面，却找不到解决方法。