我要评论在 webpack 1 中主要是由bundle-loader进行懒加载，而 webpack 2 中引入了类似于 systemjs 的system.import语法，首先我们对于system.import的执行流程进行简单阐述：
- webpack 会在编译过程中扫描代码库时将发现的system.import调用引入的文件及其相关依赖进行单独打包，注意，webpack 会保证这些独立模块及其依赖不会与主应用的包体相冲突。
- 当我们访问到这些独立打包的组件模块时，webpack 会发起 jsonp 请求来抓取相关的包体。
- system.import 同样也是 promise，在请求完成之后system.import会将抓取到的模块作为参数传入then中的回调函数。
- 如果我们重复访问已经加载完毕的模块，webpack 不会重复执行抓取与解析的过程。
而 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>
)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论