react中使用webpack的import()异步加载组件的实现

最新推荐文章于 2024-08-13 08:41:29 发布

barnett_y

最新推荐文章于 2024-08-13 08:41:29 发布

阅读量5.8k

点赞数

分类专栏：【Webpack点滴知识】

【Webpack点滴知识】专栏收录该内容

207 篇文章 11 订阅

订阅专栏

你还在用require.ensure()？？？

low了！！

import()的大名听过没？？

下面隆重介绍webpack代码切割新方案。

官网教程在这里：https://doc.webpack-china.org...

先别去看官网教程，因为webpack官网教程通常都比较不靠谱，写的云里雾里。

webpack中，从v1到v2，v3暂且不提，一共有3种代码切割加载的方案。

1、System.import()；已废除，不推荐

2、require.ensure()； v1和v2均可使用

3、import()；v2支持，v1不支持

System.import()

已废除，就不做介绍了

require.ensure()

从v1时代，使用过webpack的同学对这种用法应该不会陌生，比较网上可以搜到很多关于require.ensure()的用法的demo。

在百度输入require.ensure()，搜到几个关键的教程。

webpack2.2文档关于require.ensure使用的介绍

简单介绍下require.ensure的经典使用方法，你若是没用过，别担心，看下面的代码就足够了。

const Foo = require.ensure([], () => {
    require("a");
}, err => {
    console.error("We failed to load chunk: " + err);
}, "chunk-name");

//react-router2 or 3
<Route path="/xx" getComponent={Foo} />

import()

这是我们今天的主角，使用场景是react-router4，你会发现在react-router4中，route的getComponent不见了。

怎么办，这时候你可以去看一下最上面给你的官方代码切割教程，列举了3种使用情况。

1、导入局部模块

function determineDate() {
  import('moment').then(function(moment) {
    console.log(moment().format());
  }).catch(function(err) {
    console.log('Failed to load moment', err);
  });
}

determineDate();

2、导入整个模块

import('./component').then(Component => /* ... */);

3、使用await

async function determineDate() {
  const moment = await import('moment');
  return moment().format('LLLL');
}

determineDate().then(str => console.log(str));

这3个官方例子都有一个共同点，那就是：import(name) -> Promise

我们发现import()方法返回的是一个Promise，啥？Promise？有人会问，Promise咋了。我直接赋给变量就可以用了啊。

const Foo = import("./xx") // 错误的写法

<Route path="/xx" component={import("./xxx")} /> //错误的写法

少年，别太天真，Promise的返回值只能通过then()来读取，所以你会发现官方的3种使用场景全都是在then()里面操作，那怎么办？我想把import()获取到的组件赋给一个变量或常量。

通过我坚持不懈的chrome，终于发现了一个“惊天函数”。

懂行的人也许会问，react-router4官网文档不是有个Bundle组件可以实现代码切割吗？

是啊，官方的这个方法我复制过来使用了之后，一堆红色报错啊，被欺骗的❤️。

不废话，直接上可用代码。

1、asyncComponent函数（惊天函数）：函数很好理解，loadComponent参数表示需要代码切割的路径，函数返回值是一个react组件，组件内部帮你做好了then()方法的操作。

import React from 'react'
export const asyncComponent = loadComponent => (
    class AsyncComponent extends React.Component {
        state = {
            Component: null,
        }

        componentWillMount() {
            if (this.hasLoadedComponent()) {
                return;
            }

            loadComponent()
                .then(module => module.default)
                .then((Component) => {
                    this.setState({ Component });
                })
                .catch((err) => {
                    console.error(`Cannot load component in <AsyncComponent />`);
                    throw err;
                });
        }

        hasLoadedComponent() {
            return this.state.Component !== null;
        }

        render() {
            const { Component } = this.state;
            return (Component) ? <Component {...this.props} /> : null;
        }
    }
);

2、在react中使用

import { asyncComponent } from './AsyncComponent'

const Foo = asyncComponent(() => import(/* webpackChunkName: "foo" */ "./foo"))

<Route path="/xx" component={Foo} />

3、好了，这样你就成功了，但是，请注意下面几个问题：

webpack2的配置文件中，需要配置chunkName。