移动端首页白屏时间太长怎么优化？

Designer°慧芳提问于 2026-03-10 09:29:18 阅读 2

移动

我们用 Vue3 + Vite 搭的移动端首页，首屏加载经常白屏 2 秒多，用户反馈很卡。已经试过路由懒加载和图片压缩，但效果不明显。

现在怀疑是主 bundle 太大（超过 1.2MB），但不知道该怎么拆或者预加载关键资源。有没有人遇到类似问题？

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 入口文件就这么几行，但打包后 vendor.js 特别大
createApp(App).use(router).mount('#app')

我来解答赞 1 收藏

反馈

1 条解答

码农艺凝 Lv1

白屏2秒确实有点顶不住，主包1.2MB确实大了。我给你几个马上能用的方案：

1. 先看下打包分析，装个插件：

npm install rollup-plugin-visualizer --save-dev

然后vite.config.js里加上：

import { visualizer } from 'rollup-plugin-visualizer'



export default defineConfig({

  plugins: [visualizer()],

  // 其他配置...

})

跑完打包会在根目录生成stats.html，看哪个依赖体积大

2. 拆主包的话可以这么干，把vue和router拆出来：

export default defineConfig({

  build: {

    rollupOptions: {

      output: {

        manualChunks: {

          'vue-bundle': ['vue', 'vue-router'],

          // 其他大依赖也可以继续拆

        }

      }

    }

  }

})

3. 关键资源预加载，在index.html头部加上：

4. 如果用了大组件库（比如element-plus），按需引入别全量导入

5. 终极方案：上SSR或者静态站点生成，不过这个改动大

建议先搞前3步，我们项目从1.3MB降到600KB左右，白屏时间砍了一半

2026-03-10 10:01