美文网首页
vue 代码分离和懒加载

vue 代码分离和懒加载

作者: 回调的幸福时光 | 来源:发表于2017-10-23 19:34 被阅读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对象。

参考

路由懒加载
异步组件
webpack 动态导入
require-enture

相关文章

网友评论

      本文标题:vue 代码分离和懒加载

      本文链接:https://www.haomeiwen.com/subject/uwtwuxtx.html