TypeScript 类和 Webpack

Question

假设我有一个具有 10 种方法的 typescript class 并且该文件导出 class 的新实例作为其默认导出。 然后我有另一个文件，比如 React 功能组件，它导入这个 class 并在 class 上调用一个方法。

这将如何优化？ Webpack/Babel 可以仅提取所使用方法的代码，还是包含整个 class 并且我会有一堆未使用的代码？

避免上课并导出每个 function 会更好吗？

我的目标是使导出的捆绑包更小，并且让 Lighthouse 更少抱怨未使用的 JavaScript。

Answer 1

大多数摇树工具（包括 Webpack）通过分析 ES6 的import和export的树来摇树未使用的exports 。

举个例子：

export class {
    myfunc1() { /* do stuff */ }
    myfunc2() { /* do stuff */ }
}

用Webpack摇树时，如果在某处使用了myFunc1 myFunc2不能摇树。

但是在这里，如果不使用 function 可能会被摇树：

export myFunc1 = () => { /* Do stuff */}
export myFunc2 = () => { /* Do stuff */}

在这种情况下，摇树（使用 Webpack）最好使用组合在一个文件中的函数，而不是 class。