基础概念
异步组件
vue.js允许将组件定义为一个工厂函数,异步的解析组件的定义。vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
定义一个组件
// 这里Promise只是示意,代表一个异步操作
const home = () => Promise.resolve({ /* 组件定义对象 */ })
动态拆分和导入
- import()
ES6语法(推荐)如果您使用的是 Babel,你将需要添加 syntax-dynamic-import
插件,才能使 Babel 可以正确地解析语法。 - require.ensure()
webpack特有
语法
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
示例
r表示resolve
const home = r => require.ensure([], () => r(require('../page/home')), 'home');
以上两种方法,会告诉 webpack自动将编译后的代码分割成不同的块,这些块将通过 Ajax 请求自动下载,最终返回一个promise对象。