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。