前端性能优化(一)
Dec 9, 2021|Oct 23, 2023
Asuhe
type
status
date
slug
summary
tags
category
icon
password
图片懒加载
使用图片懒加载功能，在目标图片还没加载过来时可以先显示loading图片。同时在
<img>进入可视范围才加载请求目标图片基本使用
- 安装
- 注册组件
- 使用
路由懒加载
路由懒加载使用
import函数，可以让路由组件单独打包。当用户访问该路由时，才会从服务器请求路由资源，也就是动态引入。特点
打包会打包成一个单独的文件 访问哪一个再去加载哪一个
- 当打包构建应用时，JS包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
- 本质就是Vue 的异步组件在路由组件上的应用
- 需要使用动态import语法, 也就是import()函数
- import(‘模块路径’): webpack会对被引入的模块单独打包一个小文件
- 当第一次访问某个路径对应的组件时，此时才会调用import函数去加载对应的js打包文件