TypeScript类和Webpack

Question

6

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

这会如何进行优化？Webpack/Babel 是否可以仅提取使用的方法代码，还是会包括整个类而导致存在大量未使用的代码？

是不是最好避免类，改为导出每个函数？

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

- Johan Nordberg

webpack等的思路树摇是在模块级别进行的，即import/export。 - ABOS

一些背景信息：https://github.com/rollup/rollup/issues/349。我想知道为什么像Webpack或Rollup这样的打包工具不能检测未使用的类方法，当Lighthouse可以做到时……你确定这是真的吗？ - madflow

鉴于JS的动态特性，假设我们有一个类，其中一些方法以素数后缀结尾，例如f_2、f_3、f_5等。还有一个函数g(r) {如果r是素数且小于100，则class_instance'f_'+r}; 因此引擎必须进行运行时分析，以有效地删除死代码？ - ABOS

madflow：不，我不确定，但是如果捆绑包变得更大而没有任何好处，选择一种可以删除该代码的模式是很好的。或者一开始就不要写它。 :) - Johan Nordberg

@JohanNordberg 我认为，在优化可被树摇的代码时，避免使用类是一种模式 :S - madflow

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Will Taylor · Answer 1

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

以下是一个例子：

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

在使用Webpack进行树摇时，如果某处使用了myFunc2，即使myFunc1没有被使用，它也无法被树摇。

但是在这里，如果没有被使用，任何一个函数都可以被树摇：

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

在这种情况下，为了更好地进行树摇（使用Webpack），最好使用在文件中分组的函数，而不是类。