tree shaking 在 vi​​te 库模式下不起作用

Question

我正在用 vite library mode 构建一个库，问题是捆绑器不是 tree shakable。

还有一些相关主题here、here，也许还有here。

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

Answer 1

我相信这与esbuild 的方式有关。这与babel 用他们更成熟的插件生态系统完成它的方式有点不同。

您期望默认为 tree-shaken 的某些代码可能不会像您期望的那样标记为 /* @__PURE__ */。

• esbuild issue
• esbuild docs

对我有用的解决方案是：

1. 用 /* @ 标记所有未使用、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,
     },
   },