在 Webpack 1 中主要是由bundle-loader進行懶加載，而 Webpack 2 中引入了類似于 SystemJS 的System.import語法，首先我們對于System.import的執行流程進行簡單闡述：
而 React Router 路由的懶加載實際上分為動態路由與與懶加載兩步，典型的所謂動態路由配置如下：
/** * <Route path="/" component={Core}> * <IndexRoute component={Home}/> * <Route path="about" component={About}/> * <Route path="users" component={Users}> * <Route path="*" component={Home}/> * </Route> */export default { path: '/', component: Core, indexRoute: { getComponent(location, cb) { ... }, }, childRoutes: [ { path: 'about', getComponent(location, cb) { ... }, }, { path: 'users', getComponent(location, cb) { ... }, }, { path: '*', getComponent(location, cb) { ... }, }, ],};正常打包
import IndexPage from './views/app.jsx'import AboutPage from './views/about.jsx'export default function({history}) { return ( <Router history={history}> <Route path="/" component={IndexPage} /> <Route path="/about" component={AboutPage} /> </Router> )}這是一個正常打包的路由寫法, 如果需要分割代碼, 我們需要改造下路由, 借助getComponent和require.ensure
webpack 代碼分割
export default function({history}) { return ( <Router history={history}> <Route path="/" getComponent={(location, callback) => { require.ensure([], function(require) { callback(null, require('./HomePage.jsx')) }) }} /> <Route path="/about" getComponent={(location, callback) => { require.ensure([], function(require) { callback(null, require('./AboutPage.jsx')) }) }} /> </Router> )}這樣看來代碼有點累, 我們稍微改造下
const home = (location, callback) => { require.ensure([], require => { callback(null, require('./HomePage.jsx')) }, 'home')}const about = (location, callback) => { require.ensure([], require => { callback(null, require('./AboutPage.jsx')) }, 'about')}export default function({history}) { return ( <Router history={history}> <Route path="/" getComponent={home}></Route> <Route path="/about" getComponent={about}></Route> </Router> )}這樣看起來是不是簡潔了很多
注意: 由于webpack的原因, 如果直接require('./AboutPage.jsx')不能正常加載, 請嘗試require('./AboutPage.jsx').default
webpack2 代碼分割
上面的代碼看起來好像都是webpack1的寫法, 那么webpack2呢?
webpac2就需要借助System.import了
export default function({history}) { return ( <Router history={history}> <Route path="/" getComponent={(location, callback) => { System.import('./HomePage.jsx').then(component => { callback(null, component.default || component) }) }} /> <Route path="/about" getComponent={(location, callback) => { System.import('./AboutPage.jsx').then(component => { callback(null, component.default || component) }) }} /> </Router> )}我們一樣可以把上面的代碼優化一下
const home = (location, callback) => { System.import('./HomePage.jsx').then(component => { callback(null, component.default || component) })}const about = (location, callback) => { System.import('./AboutPage.jsx').then(component => { callback(null, component.default || component) })}export default ({ history }) => { return ( <Router history={history}> <Route name="home" path="/" getComponent={home} /> <Route name="about" path="/about" getComponent={about} /> </Router> )}webpack2 + dva 實現路由和 models 懶加載
const routerThen = (app, callback, [component, model]) => { app.model(model.default || model) callback(null, component.default || component)}export default ({ history, app }) => { return ( <Router history={history}> <Route name="home" path="/" getComponent={(location, callback) => { Promise.all([ System.import('./views/app.jsx'), System.import('./models/topics') ]).then(routerThen.bind(null, app, callback)) }} /> <Route name="article" path="/article/:id" getComponent={(location, callback) => { Promise.all([ System.import('./views/article.jsx'), System.import('./models/topic') ]).then(routerThen.bind(null, app, callback)) }} /> </Router> )}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
