您的位置:首页 > 产品设计 > UI/UE

vue_router打包(webpack)

2017-03-20 13:37 726 查看

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名,提供
require.ensure
第三个参数作为 chunk 的名称:

require.ensure语法:

require.ensure(dependencies: String[], callback: function(require), chunkName: String)


const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'home_22')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'itme')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'score')

callback:是用箭头函数来实现
参数=>表达式
其中参数r与后面的r(require('./Foo.vue')),中的r一致即可
如果是rr那么后面的为rr(require('./Foo.vue')),如果是jj 那么后面也是jj
参数名可以自已来命名。

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出
require.ensure
的依赖(传空数组)



会根据chunk的名字来打包到不同的模块js中,这样就可以在要用的时候加载(路由懒加载);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: