vite 库模式下 Tree Shaking 不起作用

Question

我正在使用vite 库模式构建一个库，问题是捆绑器不可进行树摇动。

这里、这里、也许这里也有一些相关的主题。

那么，有人有这方面的经验吗？

Answer 1

esbuild我相信这与引擎盖下的捆绑方式有关。babel这与他们更成熟的插件生态系统的方式略有不同。

默认情况下您期望的某些代码tree-shaken可能不会按照您的预期进行标记/* @__PURE__ */。

• esbuild问题
• esbuild 文档

对我有用的解决方案是：

1. 使用 /* @ PURE */标记所有在未使用时可以删除的函数、tree-shaken 函数。（谨慎使用）

// src/icon.tsx

/* @__PURE__ */
export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
  (props, forwardedRef) => (
    <svg {...props} ref={forwardedRef}>
      <path
        d="M14.5"
        fill={props.color}
      />
    </svg>
  ),
)

2. 在构建步骤中保留模块：

// vite.config.ts

rollupOptions: {
  output: {
    preserveModules: true,
  },
},