vue--按需加载的3种方式（解决网页首次加载速度慢的问题）

1、vue的异步组件加载

使用异步组件加载，打包的时候会将每一个组件分开打包到不一样的js文件中：

{path: '/index', name: 'index', meta:{ title:'首页', requireAuth:true }, /*这是异步加载组件，当你访问时 ，才会加载 ,vue-router中，require代替import解决vue项目首页加载时间太久的问题*/ component: resolve => { clearTimeout(_pageTimer);
　　　　//这里是设置定时器，超过期间，若是没有被中止，则输出“网络加载超时” _pageTimer = setTimeout(function () { tipsCallback();//做用输出字符串提示 },timeout); require(['@/page/index/index.vue'], function (component) {
　　　　　//在组件加载完后，若是定时器存在，则清除定时器。 if(_pageTimer){clearTimeout(_pageTimer);} resolve(component) }) }},

 

2、ES新提案：import()——动态加载ES模块

官方推荐使用这种方式，注意若是你但愿在Vue router 的路由组件中使用这种语法的话，你必须使用 Vue Router 2.4.0+ 版本。

 { path: '/index', component: () => import('@/page/index/index'), name: '首页' },

 

3、webpack提供的require.ensure()

语法：require.ensure(dependencies: String[], callback: function(require), chunkName: String)

一、dependencies：依赖   

这是一个字符串数组，经过这个参数，在全部的回调函数的代码被执行前，咱们能够将全部须要用到的模块进行声明。

二、callback：回调 

当全部的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会做为一个参数传递给这个回调函数。所以，咱们能够进一步 require() 依赖和其它模块提供下一步的执行。

三、chunkName：chunk名称

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。经过提供 require.ensure() 不一样执行点相同的名称，咱们能够保证全部的依赖都会一块儿放进相同的 文件束(bundle)。

{ path: '/index', component: r => require.ensure([], () => r(require('@/pages/index/index')), 'index'), meta: { title: '首页' } }

这里只是作记录使用。