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

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

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

npm install react-loadable

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

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

module: {
 rules: [
  {
   test: /\.(js|jsx)$/,
   include: [paths.appSrc, path.resolve(__dirname, './node_modules/yylib-antd-mobile/dist/')],
   loader: require.resolve('babel-loader'),
   options: {cacheDirectory: true,
    plugins: [
       ['import', {libraryName: 'antd-mobile', style: true}],
       "syntax-dynamic-import",
    ]
   },
  },
 ]
}

三、router.js中代码如下：

import App from '../modules/App';
import Loadable from "react-loadable";

const Loading = () => <div>Loading...</div>;
const TaskList = Loadable({
   loader: () => import('../modules/taskCenter/taskList/TaskList'),
   loading: Loading
});
const Approve = Loadable({
   loader: () => import('../modules/icopApprove/Approve'),
   loading: Loading,
});

<Route path='taskCenter'>
 <IndexRoute component={TaskList} />
 <Route path="taskList"  component={TaskList}/>
   </Route>
<Route path="approve">
 <IndexRoute  component={Approve}/>
</Route>

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

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

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

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