vue首屏白屏原因及解决办法
作者：互联网
vue首屏白屏原因大概有以下几点：
一.路由模式错误
由于把路由模式mode设置成history了，默认是hash
解决方法：
改为hash或者直接删除模式配置，如果非要用的话，在服务端加一个覆盖所有情况的候选资源。
二.dist中文件引用路径错误
打包后的dist目录下的文件引用路径不对，因找不到文件而报错导致白屏
解决方法：
修改config下面index.js的模块导出路径。
三.浏览器不支持es6
在项目中使用了es6语法，一些浏览器不支持es6，造成编译错误不能解析而造成白屏
解决方法：
安装Babel ，Babel 会把这些新语法转译成较低版本的代码。
npm install --save-dev @babel/core @babel/cli @babel/preset-env
四.加载文件资源过大
单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js 和vendor.js)，所以当网速差的时候会产生一定程度的白屏
解决方法：
路由懒加载，组件懒加载
路由懒加载
// 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')
}
组件懒加载
// import 方式
components:{
"dailyModal":()=>import("./dailyModal.vue")
},
// require 方式
components:{
"dailyModal":resolve=>require(['./dailyModal.vue'],resolve)
},
CDN 资源优化
CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN 的关键技术主要有内容存储和分发技术。
随着项目越做越大，依赖的第三方 npm 包越来越多，构建之后的文件也会越来越大。再加上又是单页应用，这就会导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏。此时我们可以使用 CDN 的方法，优化网络加载速度。
解决方案
- 将 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>
12345678
- 在 vue.config.js 配置 externals 属性
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}
- 卸载相关依赖的 npm 包
npm uninstall vue vue-router vuex axios
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, // 是否删除原文件
})
)
}
}
vue.config.js中关闭productionSourceMap
productionSourceMap是用来报错时定位到代码位置。
如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。
productionSourceMap: false,
SSR，服务端渲染，在服务端事先拼装好首页所需的 html
首页加 loading或 骨架屏（优化体验）
随着 SPA 在前端界的逐渐流行，单页面应用不可避免地给首页加载带来压力，此时良好的首页用户体验至关重要。很多 APP 采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。
所谓的骨架屏，就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。在这个过程中用户会感知到内容正在逐渐加载并即将呈现，降低了“白屏”的不良体验。
骨架屏详情
原文链接：https://blog.csdn.net/m0_48076809/article/details/109058909
标签：vue,require,js,home,白屏,首屏,加载 来源： https://www.cnblogs.com/yyshow/p/16630297.html