前言
为什么需要vue懒加载(按需加载)?
学习Vue的时候,各类教程都会告诉我们:Vue的特点是SPA - Single Page Application(单页面应用程序)。
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后,一般情况下,会放在一个单独的js文件中。但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面非常大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
路由懒加载有着诸如:“只有第一次会加载页面,以后的每次页面切换,只需要进行组件替换。减少了请求体积,加快页面的响应速度,降低了对服务器的压力”等等优点。
为了解决上面的问题,我们需要对Vue实现组件懒加载(按需加载)。
阅前须知:
下面,我将简单讲解一下 Javascript 的懒加载(按需加载)原理以及在Vue上的应用。 原理部分为我个人参考多篇文章总结而来,有可能存在错误。希望发家阅读时,抱着质疑的态度去阅读。同时也欢迎大家评论指正!!!
本文所讲的JS、Webpack 以及 Vue-Cli版本分别为:
- Javascript:ES2015(ES6)及以上
- Webpack:Webpack v4 及以上
- Vue-Cli: Vue-Cli v4
正文
什么是懒加载(按需加载)?
路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。
官方解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
上面这段话,用一句俗语讲就是“占着茅坑不拉屎”。先占着茅坑,屎意来的时候再来。
也就是,组件现在路由里注册但不进行组件的加载与执行,等到需要访问组件的时候才进行真正的加载。
懒加载(按需加载)的前提
懒加载前提:
进行懒加载的子模块(子组件)需要是一个单独的文件
为什么呢?因为懒加载是对子模块(子组件)进行延后加载。如果子模块(子组件)不单独打包,而是和别的模块掺和在一起,那其他模块加载时就会将整个文件加载出来了,这样子模块(子组件)就被提前加载出来了。所以, 要实现懒加载,就得先将进行懒加载的子模块(子组件)分离出来。
懒加载实现的前提:ES6的动态加载模块 - import()
调用import()之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中。
---- 来自《webpack - 模块方法》的import()小节
简单来讲就是,通过import()
引用的子模块会被单独分离出来,打包成一个单独的文件。
这里有个知识点:
项目通过 webpack 打包时会进行资源整合,也就是会把项目中的 JS、CSS等文件只能找一定的规则进行合并,已达到减少资源请求
的目的。
代码示例
构建一个简单的webpack项目:
webpack.congfig.js
文件配置如下
/*webpack.config.js*/
const path = require('path')
module.exports = {
entry:'./src/main.js', //入口文件
output: {
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js',
filename: 'bundle.js',
}
}
- 创建入口文件
main.js
/* main.js */
// 这里引入con.js,注意没有使用
import() require('./con.js')
- 创建被引入文件
con.js
/* con.js */
function cons(){
console.log("123")
}
module.exports = {cons}
具体目录结构如下:
接着运行 npm run build
进行打包,结果如下:
可以看到使用require()
引入con.js
,打包后的结果是con.js
合并到bundle.js
。
打开bundle.js
,可以看到con.js
代码被嵌入bundle.js
。
可以看到,使用import()
引入con.js
,con.js
打包成独立的js文件。
注意:
上面的例子,使用的都是同一套webpackconfig.js配置文件。所以,实现上面的功能仅仅是因为import()的使用。
小知识点:import()
中的注释。
我们注意到,import()
括号里面有一串注释,如:
import(/* webpackChunkName: "con" */ './con.js')
他并不是可有可无的东西。通过这个注释,再配合webpacj.config.js
的output.chunkFilename
,我们可以设置打包生成的文件(chunk
)的名字。例如,上面例子的Webpack
的配置:
module.exports = {
entry:'./src/main.js', //入口文件
output: {
path: path.resolve(__dirname, 'dist'),
chunkFilename: '[name].bundle.js',
filename: 'bundle.js',
}
}
这里设定了chunkFilename
的命名规则为:[name
]+.
+bundle.js
。这里的[name
]就是/* webpackChunkName: "con" */
设定的值,除了webpackChunkName
,还有其他属性设定,详情请看:
借助import()
,我们实现了子模块(子组件)的独立打包(children chunk
)。现在,距离实现懒加载(按需加载)还差关键的一步 -- 如何正确使用独立打包的子模块文件(children chunk)实现懒加载
。这也是懒加载的原理。
借助函数实现懒加载(按需加载)
首先,我们先来回顾一下JavaScript函数的特性:
无论使用函数声明还是函数表达式创建函数,函数被创建后并不会立即执行函数内部的代码,只有等到函数被调用之后,才执行内部的代码。 相信对于这个函数特性,大家都十分清楚地。看到这里,大家对于懒加载的实现可能已经有了思路。
只要将需要进行懒加载的子模块文件(children chunk)
的引入语句(本文特指import()
)放到一个函数内部。然后再需要加载的时候执行该函数。这样就可以实现懒加载(按需加载)。这也就是是懒加载(按需加载)的原理了
将上面的例子补充完整:
新增index.html
文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载演示</title>
</head>
<body>
<button class="button1" style="cursor: pointer;">懒加载 con.js</button>
<script src="bundle.js"></script>
</body>
</html>
main.js
改动如下:
window.onload = () => {
const btn = document.querySelector('.button1')
// 给按钮添加click事件,按钮被点击后,加载 con.js
btn.onclick = () => import(/* webpackChunkName: "con" */ './con.js')
}
目录结构如下:
打包后,运行项目:
可以看到,
con.js
实现了懒加载(按需加载) 。
懒加载(按需加载)实现原理的概括
回顾前两节的内容,懒加载(按需加载)原理分为两步:
- 将需要进行懒加载的子模块打包成独立的文件(
children chunk
); - 借助函数来实现延迟执行子模块的加载代码;
是不是很简单呀!这里的技术难点就是
如何将懒加载的子模块打包成独立的文件
。好在ES6
提供了import()
。然后这一切就变得十分简单了。
在Vue-router 实现路由懒加载(按需加载)
讲了这么多,最后再来讲讲懒加载在vue-router
的使用吧。有了前面的基础,在vue
上使用懒加载就变得简单了。
以往我们配置Vue-router
是这样的:
import Vue from 'vue'
import VueRouter from 'vue-router'
// 这里引入子模块
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
上面的例子先加载子组件,然后将子组件命名为Home
,最后再将Home
赋给Vue
的component
。这样就导致子组件的提前加载。 接下来,实现子组件懒加载,则改动如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
// 将子组件加载语句封装到一个function中,将function赋给component
component: () => import( /* webpackChunkName: "home" */ '../views/Home.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
将子组件加载语句封装到一个function
中,将functio
n赋给componen
t。这样就可以实现Vue-router
懒加载(按需加载)。
是不是非常简单!哈哈!
可能这里有人会疑惑,component
可以接收一个function
吗?
这确实可以的。不要被以往的观念束缚。component
是对象的一个属性,在Javascript
中属性的值是什么类型都可以。
简述另外两种实现Vue-router路由懒加载的方式
1. vue异步加载技术:
1:vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,此时一个组件会生成一个js文件。
2:component: resolve => require(['放入需要加载的路由地址'], resolve)
{
path: '/problem',
name: 'problem',
component: resolve => require(['../pages/home/problemList'], resolve)
}
2.webpack提供的require.ensure()实现懒加载:
1:vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
2:这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
3:require.ensure可实现按需加载资源,包括js,css等。他会给里面require的文件单独打包,不会和主文件打包在一起。
4:第一个参数是数组,表明第二个参数里需要依赖的模块,这些会提前加载。
5:第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起,这样就生成了两个chunk,第一次加载时只加载主文件。
6:第三个参数是错误回调。
7:第四个参数是单独打包的chunk的文件名
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
require.ensure(['@/components/HelloWorld'],()=>{
resolve(require('@/components/HelloWorld'))
})
}
Vue.use('Router')
export default new Router({
routes:[{
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})
import和require的比较(了解)
1:import 是解构过程并且是编译时执行
2:require 是赋值过程并且是运行时才执行,也就是异步加载
3:require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量
结语
至此,关于懒加载(按需加载) 的说明就结束了。刚开始时对这部分还是挺畏惧的。心想着懒加载,这么高大上的东西一定非常难。后来查阅许多资料,仔细研究后,逐渐了解了懒加载,并借着写这篇文章的机会,边写边学,进一步巩固知识点,算是对懒加载有了较深的理解吧。其实,仔细看来懒加载的原理并不是很复杂。希望本文对大家有所启发与帮助。
其中可能存在错误,希望各位大佬踊跃指出。