我是靠谱客的博主 含蓄季节,最近开发中收集的这篇文章主要介绍react中使用webpack的import()异步加载组件的实现,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

你还在用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。

chunkFilename: '[name].js'

如果你的异步加载组件有导入样式,请把样式移植到全局js文件导入。

好了,本文到此结束。

“小朋友,等等,你有demo吗?看文字我看不懂啊!”

我回头问道:“你想看demo?那就请看 二月的import()切割实现,感兴趣可以持续关注,如果webpack出了更好的玩意,我会持续跟进应用到项目中。”

如果文章对你有帮助,请点击一下推荐。

https://segmentfault.com/a/1190000009820646

最后

以上就是含蓄季节为你收集整理的react中使用webpack的import()异步加载组件的实现的全部内容,希望文章能够帮你解决react中使用webpack的import()异步加载组件的实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部