可摇树图标组件

Question

我正在ChakraUI 和引导图标之上创建一个自定义设计系统。

引导图标包含 1000 多个 svg 图标。
我创建了一个抽象的 Icon 组件来抽象图标名称，这似乎更方便 IMO。

但是，我不确定这个模块是否会被摇树，而且我不知道如何更改实现以使其可摇树。

图标.tsx

import React from 'react'
import * as bootstrapIcons from '@emotion-icons/bootstrap'

// Union of all icon names: 'Alarm' | 'Circle' | 'Square' ...
type IconNames = keyof typeof bootstrapIcons

export const Icon: FC<{name: IconNames}> = ({name}) => {
  const Icon = bootstrapIcons[name]

  return (
    <div>
      <Icon style={{...}} />
    </div>

  )
}

App.tsx

import React from 'react'
import { Icon } from './Icon'

const App = () => {
  return <div>
    <Icon name="Alarm" />
  </div>
}

Answer 1

Astrix 导入不能摇树。

一般来说，当涉及到图标时，您可以使用 Sprite Sheet 或 Tree Shaking，但不能同时使用两者。

要使这个特定的库树摆脱图标，您必须将导入和使用更改为如下所示（尚未测试，但应该可以工作）。

import { Alarm } from '@emotion-icons/bootstrap/Alarm';

const Use = () => <Alarm/>

这里肯定有一个警告，可以构建一个可以更改的构建时插件...

<Icon name="Alarm"/>
 // to.
import { Alarm } from '@emotion-icons/bootstrap/Alarm';
<Alarm/>

并删除导入。

astrix 导入不能进行树摇动的原因是因为 javascript 是一种非常动态的语言，静态分析使用了哪些键有时非常困难。

考虑下面的代码

import * as bootstrapIcons from '@emotion-icons/bootstrap'

bootstrapIcons["mralA".reverse()] // which icons should be tree shaken?
const Icons = new Proxy(bootstrapIcons) // which icons should be included? using proxy traps.
const SubSet = PullSubset(bootstrapIcons) // which icons should be included? no matter what the implementation of PullSubset is it will be impossible to preform static analysis on it to determine which icons have been used.