vue3项目首次打开页面加载慢优化

作者: 图恩分类: 开发笔记阅读: 1142字数: 3370发布时间： 2023-02-06 20:49:41

大家好我是图恩，最近发现后台管理系统首次打开比较慢，为了在页面没显示内容的时候让用户感觉到是在加载，为此做了一些优化。

因为最近代码更新相对比较频繁，在本地打完包后上传到服务器上，首次打开的时候发现页面一片空白，由于之前对打包也未作优化，导致页面在加载js跟css文件上面花了比较多的时间。

这次主要是对页面首次加载跟打包两个部分做了优化。

首次加载优化

页面首次加载的时候在id="app"的div中添加了一个loading，在vue实例未渲染之前会显示，渲染后会将页面代码写入到这个dom中间，就会把loading的代码覆盖掉，这样既不用手动去清除loading这部分代码又达到了体验优化的效果，以下代码供参考。

<body>
  <div id="app">
    <!-- 首次加载，文件未下载完成时显示一个loading -->
    <style>
      .el-loading-mask {
        position: absolute;
        z-index: 2000;
        background-color: hsla(0, 0, 100%, ・9);
        margin: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transition: opacity .3s;
      }

      .el-loading-spinner {
        top: 50%;
        margin-top: -21px;
        width: 100%;
        text-align: center;
        position: absolute;
      }

      .el-loading-spinner .circular {
        height: 42px;
        width: 42px;
        animation: loding-rotate 2s linear infinite;
      }

      .el-loading-spinner .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: #409eff;
        stroke-linecap: round;
      }

      @keyframes loading-rotate {
        100% {
          transform: rotate (1turn);
        }
      }

      @keyframes loading-dash {
        0% {
          stroke-dasharray: 1, 200;
          stroke-dashoffset: 0;
        }

        50% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -40px;
        }

        100% {
          stroke-dasharray: 90, 150;
          stroke-dashoffset: -120px;
        }
      }
    </style>
    <div class="el-loading-mask">
      <div class="el-loading-spinner">
        <svg class="circular" viewBox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>
        </svg>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

打包优化

打包优化主要是对将之前element-plus的全局引入改为了按需引入方式了，其次就是将一些第三方库单独提出打包了，这样就不会像之前所有的文件都打成一个js入口文件中了，以下代码供参考。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
// element-plus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-router': ['vue-router'],
          'vue': ['vue'],
          'echarts': ['echarts'],
          'countupjs': ['countup.js'],
          'wangeditor': ['@wangeditor/editor'],
          '@wangeditor-editorforvue': ['@wangeditor/editor-for-vue'],
          'axios': ['axios'],
          'element-plus': ['element-plus'],
        },
        entryFileNames: 'assets/js/[name]-[hash].js',
        chunkFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      }
    }
  }
});

从上面的截图中可以看到目前最大的文件就是echarts库，其次就是编辑器库，不过由于服务器开启了gzip压缩，所以实际访问的时候是加载gzip文件的，截图中也显示vite在build的时候也会贴心的显示gzip文件大小，可以看到相比正常的文件gzip文件大小几乎只有原文件的三分之一，如果你的项目加载也比较慢，赶紧去试试开启gzip吧。

本文章由javascript技术分享原创和收集

vue3项目首次打开页面加载慢优化

首次加载优化

打包优化

发表评论 (审核通过后显示评论)：

文章评论(0)