javascript - Rollup + HoCs treeshaking

Question

我正在尝试使用typescriptand创建一个组件库rollup。

我有一个组件，Canary.

function Canary() {
    ...
}

export default React.memo(Canary)

请注意如何Canary包装在 HoC ( React.memo) 中。

我还有另一个组件，SomeComponent

function SomeComponent() {
    ...
}

export default SomeComponent

SomeComponent如果我要使用刚刚导出的内容来构建我的库，

src/index.ts

export { default as SomeComponent } from './SomeComponent'

该库是可摇树的。但是，如果我添加包装在 HoC 中的组件，则 treeshaking 会失败。不管我如何SomeComponent从我的库中导入，Canary都会被拉到一起并最终进入捆绑包。

我正在使用它的一个变体来检测它是否可摇晃的东西，是否为汇总而修改。

我找到了这个，它讨论了如何提示 webpack 之类的工具。我已经使用 NextJS（内部使用的 webpack）设置了一个测试项目，并添加sideEffects: false到我的库package.json中无济于事 -但是，我不认为是我的代码破坏了 tree-shaking，我认为它是React.memoHoC。它需要在可分发中标记为纯。

即手动编辑输出行

var index = React.memo(Canary);

export { index as Canary }

至

var index = /*#__PURE__*/memo(Canary);

并重新运行 treeshaking 测试通过。

问题向 Rollup 发出信号表示您想标记纯粹的东西的正确方法是什么？我是否以正确的方式进行此操作？

标签： javascripttypescriptwebpackrollupjs