vue项目白屏的原因及优化

最新推荐文章于 2025-06-24 17:13:24 发布

转载最新推荐文章于 2025-06-24 17:13:24 发布 · 3.4k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/m0_48076809/article/details/109058909?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMach

文章标签：

#vue.js

vue专栏专栏收录该内容

19 篇文章

订阅专栏

本文探讨了单页面应用白屏问题的解决方案，包括路由懒加载、组件懒加载、CDN资源优化、gzip压缩、vue.config.js配置和SSR等技术，以提升首屏加载速度和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、原因：

单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js 和vendor.js)，所以当网速差的时候会产生一定程度的白屏

二、解决办法：

1、路由懒加载，组件懒加载

1.路由懒加载

// 1、Vue异步组件技术：
{
  path: '/home',
  name: 'Home',
  component: resolve => require(['../views/home.vue'], resolve)
}

// 2、es6提案的import()
{
  path: '/',
  name: 'home',
  component: () => import('../views/home.vue')
}

// 3、webpack提供的require.ensure()
{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('../views/home.vue')), 'home')
}

2.组件懒加载

components:{
  "dailyModal":()=>import("./dailyModal.vue")
},
components:{
  "dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},

2、CDN 资源优化

CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度。
1、将 vue、vue-router、vuex、axios 这些 vue 全家桶的资源，全部改为通过 CDN 链接获取，在 index.html 里插入相应链接。

<body>
  <div id="app"></div>
  	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  	<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  	<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 	<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 	<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

2、在 vue.config.js 配置 externals 属性

module.exports = {
 ···
    externals: {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios'
    }
 }

3、卸载相关依赖的 npm 包

npm uninstall  vue vue-router vuex axios

3、gZip 加速优化

所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(
      new CompressionPlugin({
        // gzip压缩配置
        test: /\.js$|\.html$|\.css/, // 匹配文件名
        threshold: 10240, // 对超过10kb的数据进行压缩
        deleteOriginalAssets: false, // 是否删除原文件
      })
    )
  }
}

4、vue.config.js中关闭map文件，能减少好多map文件
productionSourceMap是用来报错时定位到代码位置。
如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。

productionSourceMap: false,

5、SSR，服务端渲染，在服务端事先拼装好首页所需的 html
6、首页加 loading或骨架屏（优化体验）
随着 SPA 在前端界的逐渐流行，单页面应用不可避免地给首页加载带来压力，此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。
所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。
骨架屏

本文转载地址