一、定义:懒加载也叫延迟加载,即按需加载,
二、为什么需要懒加载: 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
三、如何与webpack配合实现组件懒加载
在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
}配合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,路由页面以及路由页面中的组件全都使用懒加载
- 优点:最大的实现懒加载,随时用,随时加载,不会造成资源浪费
- 缺点:一个页面嵌套多个组件的时候,会发送多个http请求,会造成网页渲染过慢,网页渲染参差不齐的问题。
2,路由页面使用懒加载,路由页面里面的组件按需进行加载
- 优点:合理解决首页延迟的问题,能够最大化的减少http的请求,
- 缺点:对团队合作要求比较严格,建立合理区分各种加载方式的组件文件夹