chevron_left

Vue 2 实践教程

免费
第 13.5 回

教程文档

Vue 2 实践教程 - 首页白屏的优化

2024年07月02日
Vue 2 实践教程

首页白屏的优化

图片压缩

对于大型图片或者加载较慢的图片,可以进行优化处理。使用合适的图片格式,如 JPEG、WebP,以及压缩工具来减小图片文件的大小。 例如使用阿里云 OSS 或七牛云,直接对图片进行裁剪、缩小。 1.png

图片懒加载

可以使用图片懒加载技术,只在图片进入视窗时才加载图片,而不是一次性加载所有图片。 压缩图片可以显著减少页面的大小,提高加载速度。可以使用图片懒加载技术,只在图片进入视口时才加载图片,而不是一次性加载所有图片。

Vue 图片懒加载的一种方法是使用 Vue-Lazyload 这个插件。你可以按照以下步骤实现:

  • 安装插件:pnpm install vue-lazyload@1.3.3
  • main.js 文件中全局注册插件:
import VueLazyload from 'vue-lazyload'

// 使用VueLaz...

课程介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

目录

适合这样的人

新手