React 动态加载组件 | étoile的小窝

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

如何实现 React 路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，提高效率。

1 使用 React.lazy 结合 Suspense 实现

1.通过 lazy() 来动态 import 需要懒加载的组件。
2.Suspense来包裹懒加载的组件进行加载，设置fallback现实加载中效果，此处使用 antd 的 Spin 组件。

import React, { Component, Suspense, lazy } from 'react'
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import './App.css';
import { Spin } from 'antd';
const Login = lazy(() => import('./pages/Login/Login.jsx'));
const Admin = lazy(() => import('./pages/Admin/Admin.jsx'));
export default class App extends Component {
    render() {
        return (
            <div className="app">
                <BrowserRouter>
                <Suspense fallback={<div style={{textAlign: 'center',margin:'200px auto', width: '100%', height: '100%'}}><Spin></Spin></div>}>
                    <Switch> 
                    {/* 只匹配一个路由 */}
                    <Route path="/login" component={Login}></Route>
                    <Route path="/" component={Admin}></Route>
                    </Switch>
                </Suspense>
                </BrowserRouter>
}

2 自定义lazyLoad函数进行实现

1.在App.js中引入lazyLoad.js文件

import {lazyLoad} from '../../util/lazyLoad'

2.修改引入路由的方式

const Login = lazyLoad(() => import('./pages/Login/Login.jsx'));

lazyLoad.js 代码如下：

import React from "react";
* 路由分割方法
export function lazyLoad(loadComponent) {
    return class extends React.Component{
        state = {Component:null}
        componentDidMount() {
            loadComponent().then(result => {
                this.setState({Component: result.default})
        render() {
            const {Component} = this.state
            return Component && <Component></Component>
}

3 预获取/预加载模块(prefetch/preload module)

在声明 import 时，使用下面这些内置指令，可以让 webpack 输出 “resource hint(资源提示)”，来告知浏览器：

1.prefetch(预获取)：将来某些导航下可能需要的资源（浏览器会在空闲时间加载资源）
2.preload(预加载)：当前导航下可能需要资源

与 prefetch 指令相比，preload 指令有许多不同之处：

1.preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
2.preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
3.preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk 会用于未来的某个时刻。

const Category = lazy(() => import(/*webpackPrefetch:true*/'../../pages/Category/Category'));

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置： jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true