导入 esm/dist 模块的正确方法是什么？ （反应/JavaScript）

Question

所以我们在我们的代码库中使用 geist 组件库。 它几乎集成到我们应用程序的某些部分，并且由于这个库是 250kb，它影响了我们的页面速度。 为了避免导入整个模块，通常的解决方案是只导入你需要的东西，理想情况下，没有什么会破坏，一切都应该按预期工作。

import { CssBaseline } from "@npkn/geist-react"

执行上述操作应该可行，但会向捆绑包添加 250kb。

导入组件的另一种方法是导入特定文件。 我有两个选项可以从 ESM 或 dist 模块导入组件

import CssBaseline from "@npkn/geist-react/dist/css-baseline"

和

import CssBaseline from "@npkn/geist-react/esm/css-baseline/index"

我已经尝试执行这两项操作，但 webpack 会抛出错误。 我也尝试过导入命名导出，但即使那样它也会抛出错误。

TypeError: _npkn_geist_react_dist_css_baseline__WEBPACK_IMPORTED_MODULE_0___default(...).flush is not a function
   9 |   static async getInitialProps(ctx) {
  10 |     const initialProps = await Document.getInitialProps(ctx)
> 11 |     const styles = CssBaseline.flush()
     |                   ^
  12 | 
  13 |     return {
  14 |       ...initialProps,

我的问题是我是在做正确的进口还是我遗漏了什么？

谢谢！

Answer 1

如果其他人遇到这个问题，请查看包大小示例https://geist-ui.dev/en-us/guide/bundle-size 。 这个例子不太管用，但我发现这个工作在https://spectrum.chat/geist-ui/react/minimize-build~d30af727-2b97-4d16-9357-9b4e5104fdc9

而不是做

import Button from '@geist-ui/react/esm/button'

做

import Button from '../../../../node_modules/@geist-ui/react/esm/button';

显着减少了我们的包大小！