issue: react-loadable 怎么加入这个骨架中 #23

安装依赖

npm install react-loadable --save

实现异步组件

// async-image.jsx
import React, { Component } from 'react';
import Logo from '../../../../asset/images/react.png';
export default class AsyncImage extends React.Component {
    render() {
        return <div><img src={Logo} /><div>这是异步加载的内容</div></div>
    }
}

// loading.jsx    
import React, { Component } from 'react';
export default class Loading extends React.Component {
    render() {
        return <div>Loading.....</div>
    }
}

引入异步组件

import React, { Component } from 'react';
import Loadable from 'react-loadable';
import Loading from './widget/loading';

const AsyncImageLoadableComponent = Loadable({
  loader: () => import('./widget/async-image'),
  loading: Loading,
});

export default class About extends Component {

  render() {
    return <div>
      <h3 className="spa-title">Egg + React + Redux + React Router SPA Server Side + Webpack Render Example</h3>
      <div style={{ 'text-align': 'center' }}><AsyncImageLoadableComponent /></div>
    </div>;
  }
}

本地开发模式异步模块找不到问题

image.png

解决方案:easywebpack 在开发模式构建时,筛选出异步chunk 模块,然后落地磁盘


具体例子见:https://github.com/easy-team/egg-react-webpack-boilerplate/blob/dynamic-import/app/web/page/app/components/router/about.jsx


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
静态资源 静态资源
import 方式引入在组件中直接 import js 和 css 公共文件, 这种引入会进行 Webpack 编译,比如压缩import 'asset/css/global.css' import 'asset/js/common.js' 文件拷贝模式借助 copy-webpack-plugin 进行文件拷贝,copy 插件已在 easywebpack@4.8.5 内置支持,然后页面通过 link 标签引入。注意拷贝的文件不会压缩和hash...
2020-04-18 sky
Next 
构建流程 构建流程
基于Egg+React+Webpack构建流程1. 本地Egg项目启动首先执行node index.js 或者 npm run dev 启动 Egg应用在 Egg Agent 里面启动koa服务, 同时在koa服务里面启动Webpack编译服务挂载Webpack内存文件读取方法覆盖本地文件读取...
2020-04-18 sky