react导入如何避免傻等
优化 React 导入性能的方法
动态导入（懒加载）
使用 React.lazy 和 Suspense 实现组件懒加载，减少初始加载时间。适用于路由组件或非关键组件。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}代码分割（Webpack 自动分割）
通过 Webpack 的 import() 语法或魔术注释实现自动代码分割。将第三方库和业务逻辑分离。
import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
// 使用 lodash
});预加载关键资源
使用 rel="preload" 或 Webpack 的 webpackPreload 标记关键资源，提前加载但暂不执行。
import(/* webpackPreload: true */ './CriticalComponent');树摇（Tree Shaking）
确保项目配置支持 Tree Shaking（如 Webpack 的 sideEffects: false），移除未使用的代码。ES6 模块的静态结构是前提。
按需加载第三方库
避免全量引入大型库（如 Lodash、Ant Design），使用其提供的按需导入功能。
import debounce from 'lodash/debounce'; // 而非整个 lodash优化静态资源路径
通过 CDN 加载第三方库（如 React、ReactDOM），利用缓存减少重复下载。需在 HTML 中直接引入：
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>服务端渲染（SSR）或静态生成（SSG）
使用 Next.js 等框架实现服务端渲染或静态生成，减少客户端加载时的白屏时间。适用于内容型网站。
分析工具辅助
通过 Webpack Bundle Analyzer 或 Chrome DevTools 的 Coverage 工具识别冗余代码，针对性优化导入逻辑。
