Babel.js 在index.tsx中导入一个简单的字符串会导致完整的.ts文件在构建时与主包捆绑在一起

mklgxw1f  于 2023-05-11  发布在  Babel
关注(0)|答案(1)|浏览(154)

使用的技术:React Typescript Webpack(本质上是一个弹出的create-react-app,因为我们计划远离CRA)每个路由(react-router)的延迟加载
我们一直在诊断一个大的主包文件,当我们开始从index.tsx中删除依赖项时,我们注意到一些有趣的事情。当从utility .ts文件导入字符串常量到src/index.tsx时,整个实用程序文件将成为主包的一部分-而不是维护适当的代码分割,只是引入字符串本身。
如果我删除字符串的导入,实用程序文件将被分配到一个单独的块文件,该块文件将在需要时加载。
有人知道是什么导致了这样的问题吗?我应该关注webpack/babel/tsconfig吗?代码中其他地方可能存在循环依赖关系,这可能会使webpack感到困惑?
导入/导出是这样写的

export const SOME_STRING = 'some_string';

...

import {SOME_STRING} from '/utils/someutilfile.ts';
agxfikkp

agxfikkp1#

使用动态导入:使用动态导入按需加载模块,而不是一次导入整个模块。这将有助于减少总体捆绑包大小并提高应用程序的性能。例如,不是像这样导入模块:

import { someFunction } from './someModule';

您可以像这样使用动态导入:

const someModule = await import('./someModule');
const result = someModule.someFunction();

如果你有一个大型的应用程序,那么将你的代码分割成可以按需加载的小块是一个很好的做法。这可以帮助减少总体捆绑包大小并提高应用程序的性能。
希望这有帮助!

相关问题