上篇文章中使用“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中。