8.9 更新: 之前想搬迁到 csdn 的时候由于邀请码问题迟迟没把博客转过来, 所以跑去博客园了, 今天发现 csdn 已经帮我把文章搬过来, 有必要修正一下这篇文章
写这篇文章的时候因为刚接触 vue, 所以捣鼓的时候有些迷糊
----------------/* 以下可以跳过 */-----------------
本来很简单的事情折腾好久
1.vue 文档只给出了 Vue.component('comp_name',function(resolve,reject){}) 在回调里 ajax 加载组件定义内容的例子, 但现在习惯. vue 文件写组件, 在点击路由获取. vue 的时候怎么弄呢?
2.webpack 的 coding-split 支持 commonjs/amd 语法, 即有不同的实现网上查了 n 多案例乱七八糟的, 最后确定两种写法
commonjs 语法: const setting = resolve => require.ensure([], ()=> resolve(require('./components/setting.vue')),'setting');
文档的写法: resolve =>require(['./components/setting.vue')],resolve);// 懒加载
当时我是结合了路由一起练习, 用的第一种, 在 github 上看到的, require.ensure 是 webpack 的语法, 在打包的时候将 require.ensure 部分指定的代码切割出来打包在另一个 chunk 上, webpack.config.js 里面加上 chunkFileName 项即可 require.ensure 的三个参数分别是: 依赖的 url, 回调, 自定义的 chunk 的名字
其实, code split 本质上就是, 将你 require 的模块单独出来另外打包, 等用到的时候再由浏览器发起异步获取, 并通过 scriptdom 的形式插入到 head 中, 这是它的底层实现我自己尝试的时候, 每获取一次异步组件, head 中都会插入两个标签, 一个 script,yigestyle, 因为. vue 文件最终会解析成 html,CSS 和 js
PS: 其实 webpack 官网的示例代码并没有 resolve=> 这种写法, 直接在函数里 require.ensure 就是了, 一开始有点疑惑, 网上找不到讲解, 自己研究发现 require.ensure 这个函数, webpack 打包编译之后
是一个_webpack_require_.e 的函数, 其本身是一个一个 thenable 实例, require.ensure 的回调放到_webpack_require_.e.then(fn) 里面, 这下子就很明显了, webpack 的这个语法本身应该是一个 promise 实例, 只是上面获取 vue 组件的写法里, 因为 require.ensure 是封装好的语法, 只好把 resolve 传入其父函数中, 在 require.ensure 的回调里通过作用域链获取并调用这也揭露了, resolve 函数不一定要在 promise 的函数参数中, 其出现位置可以灵活设置, 在阮一峰老师的 ES6 入门里提到过, resolve 函数是 js 引擎能提供的, 不需要自己部署
------------------/* 以上可跳过 */------------------
首先, 异步组件的使用没刚接触时以为的那么复杂
1. 如果套用官网的方式是可以的:
- HTML:
- <input type="button" @click="showchild" value="show"> // 点击按钮后, show 为真, 先获取 child 组件, 再渲染 div 内容
- <div id="contain" v-if="show">
- <child></child>
- </div>
- JS:
- //...
- data() {
- return {
- msg: 'Welcome to Your vue.js App',
- show: false
- }
- },
- methods: {
- showchild: function() {
- this.show = true;
- }
- },
- components: {
- 'child': function(resolve) {
- require(['./components/child.vue'], resolve);
- }
* 注意: 加载异步组件的时候, 组件名后边的. vue 不要忽略
这个例子应该比较直观了点击按钮之后改变了变量 show 的布尔值为真, 由于 child.vue 是异步组件, 所以会先 ajax 获取组件然后渲染
在很多情况下异步组件会配合 vue-router 使用来切换视图, 其实这时候用哪种语法的都可以
以上这篇 vue+webpack 实现异步组件加载的方法就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
您可能感兴趣的文章:
Vue.js 中用 webpack 合并打包多个组件并实现按需加载
webpack+vue.js 实现组件化详解
浅谈 vue 项目优化之页面的按需加载 (vue+webpack)
webpack+vue.js 快速入门教程
Vue 异步组件使用详解
来源: http://www.jb51.net/article/134345.htm