vue 懒加载

一、定义：懒加载也叫延迟加载，即按需加载，

二、为什么需要懒加载： 在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

三、如何与webpack配合实现组件懒加载

1. 在webpack配置文件中的output路径配置chunkFilename属性， chunkFilename路径将会作为组件懒加载的路径

   output: {
   path: resolve(__dirname, ‘dist’)，
   filename: options.dev ? ‘[name].js’ : ‘[name].js?[chunkhash]’
   chunkFilename: ‘chunk[id].js?[chunkhash]’，
   publicPath: options.dev ? ‘/assets/’ : publicPath
   }

2. 配合webpack支持的异步加载方法
   —- resolve => require([URL], resolve), 支持性好 () => import(URL),
   —- webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用,

npm install –save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

– es6转换为es5 –

use: [{
loader: ‘babel-loader’,
options: { presets: [[‘es2015’, {modules: false}]]， plugins: [‘syntax-dynamic-import’]
}
}]

---

四、具体实例中实现懒加载

1， 路由中配置异步组件

export default new Router({
routes: [ {
mode: ‘history’,
path: ‘/my’,
name: ‘my’,
component: resolve => require([‘../page/my/my.vue’], resolve),//懒加载
},] ; })

2， 实例中配置异步组件

components: {
historyTab: resolve => {require([‘../../component/historyTab/historyTab.vue’], resolve)},//懒加载
// historyTab: () => import(‘../../component/historyTab/historyTab.vue’)
}

3，全局注册异步组件

Vue.component(‘mideaHeader’, () => {
import(‘./component/header/header.vue’);
})

五、配置异步组件实现懒加载的问题分析

1. 多次进入同一个页面也不会出现多次加载的问题，页面在加载之后会出现缓存，同理，同一个一个组件多次加载也不会出现多次加载的问题
2. 在异步加载页面中载嵌入异步加载的组件时对页面的影响？异步加载的组件将会比页面中其他元素滞后出现， 页面会有瞬间闪跳影响；因为在首次加载组件的时候会有加载时间， 出现页面滞后， 所以需要合理的进行页面结构设计， 避免首次出现跳闪现象；

六、懒加载的最终实现方案
1，路由页面以及路由页面中的组件全都使用懒加载
- 优点：最大的实现懒加载，随时用，随时加载，不会造成资源浪费
- 缺点：一个页面嵌套多个组件的时候，会发送多个http请求，会造成网页渲染过慢，网页渲染参差不齐的问题。

2，路由页面使用懒加载，路由页面里面的组件按需进行加载

• 优点：合理解决首页延迟的问题，能够最大化的减少http的请求，
• 缺点：对团队合作要求比较严格，建立合理区分各种加载方式的组件文件夹