vue 代码分离和懒加载
2017-10-23 本文已影响159人
回调的幸福时光
基础概念
异步组件
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对象。
