时间戳

首页 > 解决方案 > TypeScript 类和 Webpack

javascript - TypeScript 类和 Webpack

问题描述

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

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

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

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

标签： javascripttypescriptwebpackbabeljsweb-vitals

解决方案

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

举个例子：

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

使用 Webpack 进行 tree-shaking 时，如果myFunc2在某处使用，myFunc1即使不使用也不能进行 tree-shaking。

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

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

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

推荐阅读