【开源项目】一行代码给SPA应用添加首屏加载动画

大家做vue项目时，有没有遇到过项目上线资源大，加载时间长，即使优化了缩减了也有可能会因为网络波动，出现白屏，这个时候就需要添加应用启动前的加载动画。

给大家推荐一个vite插件vite-plugin-spa-loading，这个插件会自动生成加载动画，并在应用加载完毕时自动隐藏，避免 app 启动前长时间的白屏。开箱即用，一行代码搞定这个需求。

github.com/yue1123/vit…

📦 安装

npm i vite-plugin-spa-loading -D

# yarn
yarn add vite-plugin-spa-loading -D

# pnpm
pnpm add vite-plugin-spa-loading -D

🦄 在项目中启用

在 vite.config.js / vite.config.ts 添加 spaLoading 插件并配置：

// vite.config.js / vite.config.ts
import { spaLoading } from 'vite-plugin-spa-loading'

export default {
  plugins: [
      spaLoading('svg', {
      debounce: 100,
      path: './src/assets/loading.svg',
      devEnable: true
    })
  ]
}

运行项目，这里为了演示效果，打开了网络节流

支持三种加载效果

可根据需求自行选择。

text loading placeholder

import { spaLoading } from 'vite-plugin-spa-loading'

export default {
  plugins: [
    spaLoading('text', { tipText: 'The loading text...' })
  ]
}

svg loading placeholder

import { spaLoading } from 'vite-plugin-spa-loading'

export default {
  plugins: [
    spaLoading('svg', {
      path: 'xxx/loading.svg'
      // or
      // content: '<svg>....</svg>'
    })
  ]
}

img loading placeholder

import { spaLoading } from 'vite-plugin-spa-loading'

export default {
  plugins: [
    spaLoading('img', {
      src: 'xxx/loading.gif'
    })
  ]
}

⚙️ 配置项

下面是所有的配置项及解释，可以自定义想要的加载效果。

spaLoading(type, { options... })

type

• Type: 'text' | 'img' | 'svg'
• Default: 'text'

加载占位符内容类型。

options.rootElementId

• Type: string
• Default: app

app 挂载元素 ID

options.tipText

• Type: string
• Default: loading...

加载占位符内容提示文字。

options.devEnable

• Type: boolean
• Default: true

开发环境是否启用

options.debounce

• Type: number
• Default: 150

防止网络良好的情况下，加载动画一闪而过。

options.src

• Type: string

当type是img时，指定图片的地址。推荐使用 base64 图片，避免网络加载影响呈现

options.content

• Type: string

当 type是svg时，指定 svg 内容。

options.path

• Type: string

当 type是svg时，指定 svg 资源路径。

options.css

• Type: string

如果已有的样式不合适，可通过此选项自定义 css

结语

如果觉得该项目还不错，在 github 上点个star吧。