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

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

移动

我们用 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')

我来解答赞 8 收藏

反馈

2 条解答

志远的笔记 Lv1

试试这个方法，可以先看看是否能通过 tree shaking 来减少 vendor.js 的大小。确保你在项目中使用了按需引入而不是全量引入第三方库。然后可以检查下是否有重复依赖导致打包体积增大。

另外，考虑使用 Webpack 的 BundleAnalyzer 插件来分析打包后的文件，找出哪些模块占用了大量空间，然后针对性地进行优化。

对于预加载关键资源，可以在 index.html 中手动添加标签，比如对一些关键的 CSS 和 JS 文件进行预加载。这样浏览器在解析 HTML 的同时就能开始加载这些资源，加快页面渲染速度。

最后，可以尝试将一些非首次渲染必需的脚本延迟加载，利用 defer 或 async 属性。这样可以让页面更快地显示出来，而不是一直等待所有的脚本加载完成。

记得每次优化后都重新测试一下效果，看看白屏时间有没有缩短。有时候优化的效果可能不会特别明显，但累积起来就能看到改善。

2026-03-22 10:11

码农艺凝 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