vue-router路由懒加载及实现的方式
也叫延迟加载,即在需要的时候进行加载,随用随载。
为什么使用路由懒加载
在终端 npm run build 后,vue项目中会生成一个 dist文件夹 ,它包含一个 js文件夹,里面有 app.js、vendor.js、manifest.js 文件,分别装的是业务逻辑代码、第三方提供商代码(框架等)、底层支撑代码(比如一系列底层环境)。
因为随着项目的开发推进,业务逻辑代码会越来越多,所以上述的业务逻辑代码文件,即 app.js文件 也会越来越大。当用户打开这个网站的时候,很可能会因为请求的文件过大而等待时间过长。为了避免这种情况,我们需要懒加载。
vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢,
一、Vue异步加载技术
vue-router配置路由,使用vue的异步组件技术,可以实现懒加载,此时一个组件会生成一个js文件。
语法:component: resolve => require([‘放入需要加载的路由地址’], resolve)
{
path: '/problem',
name: 'problem',
component: resolve => require(['../pages/home/problemList'], resolve)
}
二、ES6推荐方式imprort ()----推荐使用
非懒加载:component: index
如果用import引入的话,当项目打包时路由里的所有component都会打包在一个js中,造成进入首页时,需要加载的内容过多,时间相对比较长
语法:component:() => import(‘./About.vue’);
//主要这句话
const router = new VueRouter({
routes: [
{ path: '/about',
component: () => import('./About.vue') }]
})
require 和 import 引入依赖的区别
require是Commonjs的规范,node应用是由模块组成的,遵从commonjs的规
import是es6为js模块化提出的新的语法,import (导入)要与export(导出)结合使用
commonjs模块与ES6模块的区别
1.commonjs输出的,是一个值的拷贝,而es6输出的是值的引用;
2.commonjs是运行时加载,es6是编译时输出接口;
链接: https://blog.csdn.net/weixin_37380784/article/details/99671933.
链接: https://blog.csdn.net/liya_nan/article/details/81141244.require 和 import 引入依赖的区别
链接: https://www.jb51.net/article/206486.htm.