Part 5 - Async Load Component

一般来说，我们在开发时，总是将所有的资源（js,css,image）都打包到一个boudle里。

有时候，我们需要将这些资源进行分包处理，和异步并行加载他们。

我们可以怎么做？

在ES2015中，import()这个方法可以在运行时动态地加载ES2015 modules。

webpack4.0或者更高版本都支持这个import()方法。

Import()方法会为我们返回一个promise function，我们可以像使用promise function一样使用它。

你可以在这条link查看更多的信息，https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

现在，让我们看看在代码中如何使用。

Step 1

首先，在项目js folder 中创建一个名为PageB.jsx的组件。如下：

import React from "react";
export default class PageB extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <span>PageB - component</span>
    }
}

Step 2

打开Main.js,修改代码如下：

import React from 'react'

import PageA from '@/js/PageA'

import '../css/Main.css'
import '../css/Main.scss' 

export default class Main extends React.Component{
    constructor(props){
        super(props)
        this.state={
            Component:PageA
        }
    }
    changePage(flag){
        if(flag=='A'){
            this.setState({
                Component:PageA
            })
        }
        else{
            import(/* webpackChunkName:"pageB" */'../js/PageB').then((c)=>{
                this.setState({
                    Component:c.default
                })
            })
        }
    }
    render(){
        let Component=this.state.Component
        return(
            <>
                <h1 className='color-red'>
                    reactapp
                    <br></br>
                    <span>blue-color</span>
                </h1>
                <a style={{margin:'10px 10px 50px 10px'}} href='#' onClick={()=>{this.changePage('B')}}>PageB</a>
                <br></br>
                <Component></Component>
            </>
        )
    }
}

在上面的代码中，我们使用了一个使用了import()方法来动态加载PageB组件。如下：

 import(/* webpackChunkName:"pageB" */'../js/PageB').then((c)=>{
                this.setState({
                    Component:c.default
                })
            })

代码 /* webpackChunkName:"pageB" */ 将会将组件PageB进行分包处理，用于异步加载，其中，pageB是boudle文件名。

 

Step 3

现在，让我们来看看在浏览器中的效果。

第一次加载时，我们看到页面显示的是PageA组件，只加载了reactapp.js这个boudle

当我们点击PageB这个link，会自动为我们异步加载PageB这个boudle，如下图：

 

 

总结：当项目非常大的时候，这个Import()就会变得非常实用，上面演示的只是怎么使用。在实际项目中，我们可以做成vue router那样的路由配置，用于异步加载组件，减少浏览器第一次加载资源的大小。