TypeScript 类和 Webpack答案

【问题标题】：TypeScript classes and WebpackTypeScript 类和 Webpack
【发布时间】：2021-03-30 12:53:28
【问题描述】：

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

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

避免类并导出每个函数会更好吗？

我的目标是让导出的包更小，同时让 Lighthouse 更少抱怨未使用的 JavaScript。

【问题讨论】：

webpack 等的思想树摇动处于模块级别，即导入/导出
一些上下文：github.com/rollup/rollup/issues/349。我想知道 Lighthouse 什么时候可以检测到未使用的类方法 - 为什么像 Webpack 或 Rollup 这样的打包工具不能……你确定是这种情况吗？
鉴于 JS 的动态特性，假设我们有一个类有一些以素数后缀结尾的方法，比如 f_2、f_3 f_5 等。还有一个函数 g(r) { if(r is prime && r
madflow：不，我不确定，但如果包变大而没有任何好处，最好选择可以删除该代码的模式。或者一开始就不写。 :)
@JohanNordberg 我会断言，在优化 treeshakable 代码时，避免类是模式：S

【解决方案1】：

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

举个例子：

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

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

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

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

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

【讨论】：