写这篇文章的时候因为刚接触vue必威:,Vue官方

Angular 和 Vue 按需加载的连串实施优化方案

2016/07/12 · JavaScript · 前端框架

正文小编: 伯乐在线 - 新空气 。未经作者许可,禁止转发!
接待参与伯乐在线 专栏编辑者。

针对前者优化的点有那多少个,举个例子:图片压缩,Coca Cola图,js/css/html 文件的削减合併,  cdn缓存, 减弱重定向, 按需加载 等等

后天有酌量针对 ionic项目 和 vue项目,做二个极大的优化,做成按需加载(也正是无恳求不加载卡塔尔国,此刻自己心坎是极端激动的。

引入看的按需加载的篇章:

angular 按需加载 相关小说:

1:  

2:  

vue 按需加载  相关小说:

1: http://cn.vuejs.org/guide/components.html#异步组件

2: 

-----------------------------------------------------------

今日就本着,按需加载(也便是无央求不加载卡塔 尔(阿拉伯语:قطر‎,分别交付一些实在项目资历的方案:

angular 按需加载方案:$ocLazyLoad

vue 按需加载方案:require([异步加载的零件], resolve)

 

Vue官方文书档案异步组件:

8.9翻新:从前想搬迁到csdn的时候是因为诚邀码难点迟迟没把博客转过来,所以跑去腾讯网了,前几日命识csdn已经帮作者把随笔搬过来,有供给修正一下那篇小说。

 angular按需加载:$ocLazyLoad

内需3个步骤,就能够实现按需加载的方案。

第1步:bower install oclazyload

第2步:$ocLazyLoad封装:

必威 1

第3步:ui-router 路由布置:

必威 2

此方案形成了,template 和 controller 的文本按需加载。那时去走访页面就足以看来效能了。

 

效果Gif演示:

必威 3

 

在大型应用中,我们或然要求将接受拆分为七个小模块,按需从服务器下载。为了让职业更简便, Vue.js 允许将构件定义为叁个厂子函数,动态地分析组件的定义。Vue.js 只在组件须要渲染时接触工厂函数,何况把结果缓存起来,用于末端的重复渲染。

写这篇文章的时候因为刚接触vue,所以捣鼓的时候某个迷糊。

vue 按需加载方案:require([异步加载的机件], resolve)

要求2个步骤,就能够产生按需加载

率先步,针对webpack.js 做安插的更动,如图:

必威 4

 

第二步:针对 router 路由,实行更换,主借使component的改观,如图。

必威 5

其三步:试行 npm run build 打包命令,就可以看来chunks文件夹生成了累累chunk的小文件,正是vue组件页面,如图:

必威 6

1 赞 1 收藏 评论

原图像和文字来源

----------------/*以下能够跳过*/-----------------

至于小编:新空气

必威 7

简单介绍还未来得及写 :卡塔 尔(英语:State of Qatar) 个人主页 · 小编的稿子 · 3

必威 8

vue 按需加载  相关文章:

当然非常轻易的作业折腾好久。

1: http://cn.vuejs.org/guide/components.html#异步组件

1.vue文书档案只交给了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的事例,但明天习于旧贯.vue文件写组件,在点击路由获取.vue的时候怎么弄呢?

2: 

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);//懒加载

         vue 按需加载方案:require([异步加载的机件], resolve)

立时自己是构成了路由一块演习,用的率先种,在github上看看的,require.ensure是webpack的语法,在卷入的时候将require.ensure部分钦定的代码切割出来打包在另叁个chunk上,webpack.config.js里面加多chunkFileName项就可以。require.ensure的四个参数分别是:信赖的url,回调,自定义的chunk的名字。

   angular 按需加载方案:$ocLazyLoad

实际,code split本质上正是,将你require的模块单独出来其它打包,等采用的时候再由浏览器发起异步获取,并透过scriptdom的样式插入到head中,那是它的平底达成。笔者要好尝试的时候,每得到三次异步组件,head中都会插入多个标签,壹个script,yigestyle,因为.vue文件最后会剖判成html,css和js。

 

PS:其实webpack官网的示范代码并未resolve=>这种写法,直接在函数里require.ensure正是了,意气风发初步有一点点纠结,英特网找不到助教,自个儿研商发掘require.ensure这几个函数,webpack打包编写翻译之后

vue 按需加载方案:require([异步加载的构件], resolve)

是一个_webpack_require_.e的函数,其自己是二个三个thenable实例,require.ensure的回调放到_webpack_require_.e.then(fn)里面,那下子就很确定了,webpack的那些语法自己应当是叁个promise实例,只是上边拿到vue组件的写法里,因为require.ensure是包装好的语法,只能把resolve传入其父函数中,在require.ensure的回调里透过成效域链获取并调用。那也报料了,resolve函数不必然要在promise的函数参数中,其现出岗位能够灵活设置,在阮生机勃勃峰先生的ES6入门里提到过,resolve函数是js引擎能提供的,不供给协和安插。

本文由必威发布于必威-前端,转载请注明出处:写这篇文章的时候因为刚接触vue必威:,Vue官方

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。