TypeScript 类和 Webpack

问题描述

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

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

避免类并导出每个函数是否更好？

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

解决方法

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

举个例子：

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

使用 Webpack 进行 treeshake 时，如果在某处使用了 myFunc2，即使不使用 myFunc1 也无法进行 treeshake。

但在这里，如果不使用，任何一个函数都可能被摇树：

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

在这种情况下，最好使用组合在一个文件中的函数，而不是一个类。