白屏出现的原因大部分是网络问题，我们的html文件都是依靠js生成了，所以就会出现一些白屏问题
解决办法
1、路由懒加载
简单的说就是当我们需要这个路由和组件的时候才加载
这是一个没有使用懒加载的例子：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})我们在使用了懒加载后是这样的
import Vue from 'vue'
import Router from 'vue-router'
/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})语法就是这样：
component：resolve=>(require(['需要加载的路由的地址'])，resolve)
不过这种不常用
下面是一种常用的写法利用import
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: ()=>import("@/components/HelloWorld")
}
]
})还有一种方法是 webpack提供的require.ensure()
{
path: '/home',
name: 'Home',
component: r => require.ensure([],() => r(require('@/components/HelloWorld')), 'home')
}平时开发中也不太常用。
2. 组件懒加载
下面演示一个没有使用懒加载的写法
<template>
<div class="hello">
<mimiwuqi></mimiwuqi>
</div>
</template>
<script>
import One from './mimiwuqi'
export default {
components:{
mimiwuqi
},
data () {
return {
msg: '秘密武器开发者中心'
}
}
}
</script>使用import组件懒加载优化以后是这样写的
<template>
<div class="hello">
<mimiwuqi></mimiwuqi>
</div>
</template>
<script>
export default {
components:{
mimiwuqi:()=>import("./mimiwuqi");
},
data () {
return {
msg: '秘密武器开发者中心'
}
}
}
</script>还可以使用异步的方法
<template>
<div class="hello">
<mimiwuqi></mimiwuqi>
</div>
</template>
<script>
export default {
components:{
mimiwuqi:resolve=>(['./mimiwuqi'],resolve)
},
data () {
return {
msg: '秘密武器开发者中心'
}
}
}
</script>到此懒加载优化方法就介绍完了
引入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>
然后在 vue.config.js 配置 externals 属性
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios':'axios'
}
}然后卸载引入的这些包
npm uninstall vue vue-router vuex axios
到此cdn方式优化就介绍完了
还可以使用gzip压缩来优化
gzip现在大部分浏览器都支持，他可以压缩我们的css和js文件的大小，然后提高传输的效率
compression-webpack-plugin可能存在兼容性问题，下载时固定版本
npm i compression-webpack-plugin@5.0.2 -S
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, // 是否删除原文件
})
)
}
}关闭map文件来优化体积
productionSourceMap是用来报错时定位到代码位置。 如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。
在vue.config.js
productionSourceMap: false
然后在nginx中配置一下
server {
#在这个server中加入下面这些代码
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
}此处有bug：
发现启动gzip压缩后的包跟之前的有差异， js方面没啥问题，但是css方面会出现问题，例如opacity不能写百分比格式，百分比格式会默认转为0.1，要写成0-1之间的小数点格式
加一些骨架屏和一些加载效果
避免用户在等待的时候出现白屏，例如：
