Typescript + React-Router + Webpack 实现按需打包/加载 从零开始配置TypeScript + React + React-Router + Redux + Webp

以前说完从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

如今咱们来看看如何根据在这个环境的基础上配置按需加载。若是Redux也没有关系，有React-Router就足够了。

 

原本觉得React的按需打包已经有很成熟的方案了，可是没想到网上仍是没有一个基于typescript的教程，这让typescript开发者情何以堪。

首先放弃使用require.ensure，由于@types/node中没有定义require的ensure，就算重写了node的index.d.ts，也会报一个warning，而且不会起做用（多是我写错了，可是我按别人的教程来写确实没有做用）。

而后放弃使用es6的import，由于个人项目内集成了antd，若是使用import的话，必须在tsconfig.js中设置models:'commonjs'，可是我antd使用按需加载必须使用models:'es2015'，而且也仍是不能使用（同上）。

 

因此这里咱们采用bundle-loader，而且这篇教程不会介绍bundle的一些使用方式，由于我本身也没摸很透。

安装依赖

npm i -D bundle-loader@0.5.5

修改routes.tsx中的代码

import * as React from 'react';
import { Route, IndexRoute } from 'react-router';
import * as Hello from './containers/Hello';

function lazyLoadComponent(lazyModule: any): any {
  return (location: any, cb: any) => {
    lazyModule((module: any) => cb(null, module.default));
  }
}

export default (
  <Route path="/">
    <IndexRoute getComponent={lazyLoadComponent(Hello)} />
    <Route path="/demo">
      <IndexRoute getComponent={lazyLoadComponent(Hello)} />
    </Route>
  </Route>
);

其中Hello容器须要经过 * as 的方式引入，否则在编译好的代码中报错。

而后以前toute上的component须要替换为getComponent，这是官方提供的按需加载的方法。

 

代码修改完毕，咱们接下来须要修改webpack中的output，在output属性中添加以下一条

chunkFilename: '[name].[chunkhash:5].chunk.js'

而后在module中添加以下规则

{ test: /src\/containers(\/.*).(tsx|ts)/, loader: "bundle-loader?lazy!ts-loader" }

我这里是用的ts-loader，你也能够改为babel-loader，都行。

注意test中匹配的是你在routes.tsx中引入的那个文件夹，通常来讲都是containers。

 

而后运行webpack或者webpack-dev-server

能够看到咱们多出来了一个chunk文件，表明咱们的引用成功了。