Webpack + react-router 按需加载

webpack + react-router 按需加载

关键函数

require.ensure(dependencies, callback, chunkName)
详情请见官方文档

webpack 配置

output: {
    path: path.join(__dirname, '../dist'),
    filename: '[name].js',
    sourceMapFilename: '[file].map',
    publicPath: '/static/',
    //加这个！
    chunkFilename: '[name].[chunkhash:5].chunk.js',
},

name 表示创建的chunk的指定名字，如果未指定则用id作为name
chunkhash 是文件的 hash 码，用来保证文件的唯一性，这里使用前五位（前几位可随意选取）

结合react-router

中文文档在这里！
其中提供了三个函数分别是：

• getChildRoutes
• getIndexRoute
• getComponents

他们的作用都是访问到当前路由时才会去加载脚本，由此按需加载便得以实现。
官方的例子中使用的是以对象的形式构建路由，在此，我觉得用jsx更加直观。
所以我们需要将原本Route组件的component属性换成getComponent以此来运行我们的关键函数。

示例代码

import React from 'react';
import {
    Route,
    IndexRedirect,
} from 'react-router';
import rootNode from './rootNode';

const routes = (
    <div>
        <Route path='/' component={rootNode}>
            <IndexRedirect to='index' />
            <Route
                path='index'
                getComponent={(location, cb) => {
                                require.ensure([], require => {
                                    cb(null, require('components/Index').default);
                                }, 'index');
                            }} />
        </Route>
    </div>
);

export default routes;

这样按需就在就完成了，但是我们可以用更优雅的方式来写。

import React from 'react';
import {
    Route,
    IndexRedirect,
} from 'react-router';
import rootNode from './rootNode';

const index  = (location, cb) => {
  require.ensure([], require => {
    cb(null, require('components/Index').default);
  }, 'index');
};

const routes = (
        <Route path='/' component={rootNode}>
            <IndexRedirect to='index' />
            <Route path='index' getComponent={index} />
        </Route>
    );

export default routes;

将对应组件的加载函数进行封装，这样更加直观易懂。
注意点

1、require(‘components/Index’).default中require方法的参数不能使用变量，只能使用字符串！

2、如果你的组件是使用es5的module.exports导出的话，那么只需要require(‘components/Index’)即可。而如果你的组件是使用es6的export
default导出的话，那么需要加上default！例如：require(‘components/Index’).default

3、如果在路由页面使用了按需加载（require.ensure）加载路由级组件的方式，那么在其他地方（包括本页面）就不要再import了，否则不会打包生成chunk文件。简而言之，需要按需加载的路由级组件必须在路由页面进行加载。

未使用redux：react-hot
使用redux：react-redux-github
使用redux：react-redux-github

参考

1、react-router 按需加载
2、webpack 按需打包加载