全面的前端编程教程 - 秘密武器开发者中心

热搜:m1 代理 前端 301

vue页面白屏的优化

2023-12-17 09:30:01

白屏出现的原因大部分是网络问题,我们的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之间的小数点格式

加一些骨架屏和一些加载效果

避免用户在等待的时候出现白屏,例如:

vue页面白屏的优化