vue性能优化-首屏白屏加载优化

你不会困
305 阅读3分钟

1.安装docker本地服务器部署项目，若没有服务器可以尝试这个方式 windows直接下载nginx安装包也可以，进入cmd开启nginx，但是有时关闭不了需要重启电脑，就比较麻烦

所以使用docker安装就比较方便

查了很多教程还是比较坑的，直接在需要的地方新建html，conf文件夹，然后在cmd输入命令

image.png

//开启80端口，将html还有nginx.conf配置文件映射到e盘
docker run --name nginx -d -p 80:80 -v E:\docker-Nginx\html:/usr/share/nginx/html -v E:\docker-Nginx\conf\nginx.conf:/etc/nginx/nginx.conf nginx

然后在conf里面修改配置文件

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    #include /etc/nginx/conf.d/*.conf;
	
	server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
		
	location / {
             root   /usr/share/nginx/html;
             index  index.html index.htm;
             try_files $uri $uri/ /index.html;
	}
		

}
}

2.vue打包，gzip压缩

安装插件vue2建议6.1.1，版本过高可能会报错，vue3建议10.0.0

npm install compression-webpack-plugin@6.1.1 --save-dev

vue.config.js新增配置

 if (process.env.NODE_ENV !== 'development') {
      // 对超过10kb的文件gzip压缩
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/,
          threshold: 10240,
        })
      );
    }

打包后有显示.gz，则配置成功

image.png

注意：配置文件只支持一个chainWebpack，若没有出现gz后缀文件检查一下是不是配置两个chainWebpack导致后面的覆盖前面的chainWebpack，没有打包gzip

image.png

3.nginx开启gzip

gzip  on;  
#低于1kb的资源不压缩 
gzip_min_length 1k;
#压缩级别1-9，越大压缩率越高，同时消耗cpu资源也越多，建议设置在5左右。 
gzip_comp_level 5; 
#需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片.
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  
#配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";  
#是否添加“Vary: Accept-Encoding”响应头
gzip_vary on;

查看控制台，有显示gzip，即开启成功

image.png

4.路由懒加载

不要采用这种方式引入

//非路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import New from '@/components/New'
import List from '@/components/List'
 
......
 
routes:[
    {path:'/Login',name:'Login',component:Login},
    {path:'/',name:'Home',component:Home},
    ...
]

使用es6这种方式引入

//下面没有指定webpackChunkName,每个组件打包成一个js文件
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')

检验的方式可以在某一个组件里面加打印，若其他页面出现该打印，则非路由懒加载

5.实际的工作需求

由于工作的需求是要求nginx路由转发去访问页面，服务器距离远导致135k的文件加载了两秒，严重影响体验，这是没有方法可以去避免

A.可以在index.html添加loading，下面是自己写的一个loading，

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <link rel="icon" href="./logo.png" />
    <style type="text/css">
      #Loading {
        top: 50%;
        left: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
        z-index: 100;
      }

      @-webkit-keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      @keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }

        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }

      .ball-beat > div {
        background-color: #d3caca;
        width: 10px;
        height: 10px;
        border-radius: 100% !important;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        display: inline-block;
        -webkit-animation: ball-beat 0.7s 0s infinite linear;
        animation: ball-beat 0.7s 0s infinite linear;
      }

      .ball-beat > div:nth-child(2n-1) {
        -webkit-animation-delay: 0.35s !important;
        animation-delay: 0.35s !important;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="Loading">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>

B.可以将其vue或者字体文件去放到存储桶里面，开启csdn服务，白屏加载速度会大大提升，但是有利有弊，虽然减小了项目的体积，但是很考验客户端的网络速度，若网速不好，也会导致白屏时间过长 6.多个js和css文件导致访问速度过慢

const webpack = require('webpack');
config.plugin('chunkPlugin').use(webpack.optimize.LimitChunkCountPlugin, [
      {
        maxChunks: 5, // 必须大于或等于 1，此处设置成最多生成5个chuank.js文件
        minChunkSize: 10000,
      },
    ]);
avatar
文章
阅读
粉丝