北京 科技网站建设,广安 网站建设,设计师怎么弄个人网站,怎么做公司内网网站React 项目打包时#xff0c;如果不进行异步组件的处理#xff0c;那么所有页面所需要的 js 都在同一文件中(bundle.js)#xff0c;整个js文件很大#xff0c;从而导致首屏加载时间过长.所有#xff0c;可以对组件进行异步加载处理#xff0c;可以使用 React-loadable实现…React 项目打包时如果不进行异步组件的处理那么所有页面所需要的 js 都在同一文件中(bundle.js)整个js文件很大从而导致首屏加载时间过长.所有可以对组件进行异步加载处理可以使用 React-loadable实现。安装yarn add react-loadable在没有使用react-loadable之前在我们的router.js里面是直接import Login这个组件的import React from react;import {BrowserRouter as Router,Route,Switch} from react-router-dom;import Login from ../pages/Login/Login;class RouteConfig extends React.Component {render() {return ();}}export default RouteConfig;运行项目查看network记录image.png可以看到1.chunk.js是1.5MB现在我们来添加react-loadable(可通过上面安装方法安装)完后在src/utils 下新建一个公共封装的loadable.js代码如下import React from react;import Loadable from react-loadable;const loadingComponent () {return loading;};export default (loader, loading loadingComponent) {return Loadable({loader,loading,});};接收一个配置对象为参数,第一个属性名为loader是一个方法用于动态加载我们所需要的模块第二个参数就是我们的Loading组件咯在动态加载还未完成的过程中会有该组件占位。我们可以将按需加载的组件和过渡组件通过参数传入最后返回包装后的组件在router.js里面做如下修改import React from react;import {BrowserRouter as Router,Route,Switch} from react-router-dom;const Login loadable(() import(../pages/Login/Login));class RouteConfig extends React.Component {render() {return ();}}export default RouteConfig;运行项目查看network记录image.png这个时候1.chunk.js是1.0MB因为只加载所需的依赖工作原理其实就是在页面组件上有包了一成高级组件来代替原来的页面组件
