上篇文章中使用“bundle-loader”,然后创建一个高阶函数来实现按需加载，这种实现方法可以随意的将数个相同的模块打包成一个chunk但是写法略微复杂，在react-router4.0中推荐了新的一种写法。

一、安装 babel-plugin-syntax-dynamic-import 和  react-loadable
.  

1
2
3
1npm install react-loadable

2

3

1
2
1npm install --save-dev babel-plugin-syntax-dynamic-import

2

二、webpack.config.js中的相关配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1module: {

2 rules: [

3  {

4   test: /\.(js|jsx)$/,

5   include: [paths.appSrc, path.resolve(__dirname, './node_modules/yylib-antd-mobile/dist/')],

6   loader: require.resolve('babel-loader'),

7   options: {cacheDirectory: true,

8    plugins: [

9       ['import', {libraryName: 'antd-mobile', style: true}],

10       "syntax-dynamic-import",

11    ]

12   },

13  },

14 ]

15}

16

三、router.js中代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
1import App from '../modules/App';

2import Loadable from "react-loadable";

3

4const Loading = () => <div>Loading...</div>;

5const TaskList = Loadable({

6   loader: () => import('../modules/taskCenter/taskList/TaskList'),

7   loading: Loading

8});

9const Approve = Loadable({

10   loader: () => import('../modules/icopApprove/Approve'),

11   loading: Loading,

12});

13

1
2
3
4
5
6
7
8
1<Route path='taskCenter'>

2 <IndexRoute component={TaskList} />

3 <Route path="taskList"  component={TaskList}/>

4   </Route>

5<Route path="approve">

6 <IndexRoute  component={Approve}/>

7</Route>

8

五、同样运行打包之后的结果如下：

与上篇文章的提到的代码分离的方法相比这种方法更简单，但是我目前不知道用这种方法如何将多个文件打包到一个chunk中。

webpack+react-router实现代码拆分按需加载(上)

webpack+react-router实现代码拆分按需加载(下)