React 按需加载 - 代码分隔
代码分隔我们现在大多数 例如: // math.js export function add(a,b) { return a + b; } App: // app.js import { add } from ‘./math.js‘; console.log(add(16,26)); // 42 打完包后: function add(a,b) { return a + b; } console.log(add(16,26)); // 42 从这个例子可以看出,打完包后将所有的js都压缩到一个文件里了。随着项目越来越大,打包的文件也会越来越大,如果再引入一些第三方的 接下来介绍一下如何将
这么做,即使没有减少整个项目的代码量,也会避免在项目初始加载时,加载没必须的 import()最简单直接的方式就是引入动态 使用 动态 import { add } from ‘./math‘; console.log(add(16,26)); 使用动态 import("./math").then(math => { console.log(math.add(16,26)); }); 注意,动态 React.lazy
以前的做法: import OtherComponent from ‘./OtherComponent‘; function MyComponent() { return ( <div> <OtherComponent /> </div> ); } 使用 const OtherComponent = React.lazy(() => import(‘./OtherComponent‘)); function MyComponent() { return ( <div> <OtherComponent /> </div> ); } 这样在组件
Suspense假如在 例如: const OtherComponent = React.lazy(() => import(‘./OtherComponent‘)); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); }
const OtherComponent = React.lazy(() => import(‘./OtherComponent‘)); const AnotherComponent = React.lazy(() => import(‘./AnotherComponent‘)); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </div> ); } 基于Router的代码分隔基于 例如: import { BrowserRouter as Router,Route,Switch } from ‘react-router-dom‘; import React,{ Suspense,lazy } from ‘react‘; const Home = lazy(() => import(‘./routes/Home‘)); const About = lazy(() => import(‘./routes/About‘)); const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> </Switch> </Suspense> </Router> ); Named Exports
export default () => { return(<div>I am a Lazy component</div>); } 如果要支持命令导出,需要重新再 // ManyComponents.js export const MyComponent = /* ... */; export const MyUnusedComponent = /* ... */; // MyComponent.js export { MyComponent as default } from "./ManyComponents.js"; // MyApp.js import React,{ lazy } from ‘react‘; const MyComponent = lazy(() => import("./MyComponent.js")); 推荐阅读 《React 手稿》 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |