大家好我是图恩，最近发现后台管理系统首次打开比较慢，为了在页面没显示内容的时候让用户感觉到是在加载，为此做了一些优化。
因为最近代码更新相对比较频繁，在本地打完包后上传到服务器上，首次打开的时候发现页面一片空白，由于之前对打包也未作优化，导致页面在加载js跟css文件上面花了比较多的时间。
这次主要是对页面首次加载跟打包两个部分做了优化。
首次加载优化
页面首次加载的时候在id="app"的div中添加了一个loading，在vue实例未渲染之前会显示，渲染后会将页面代码写入到这个dom中间，就会把loading的代码覆盖掉，这样既不用手动去清除loading这部分代码又达到了体验优化的效果，以下代码供参考。
<body>\n <div id="app">\n <!-- 首次加载，文件未下载完成时显示一个loading -->\n <style>\n .el-loading-mask {\n position: absolute;\n z-index: 2000;\n background-color: hsla(0, 0, 100%, ・9);\n margin: 0;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transition: opacity .3s;\n }\n\n .el-loading-spinner {\n top: 50%;\n margin-top: -21px;\n width: 100%;\n text-align: center;\n position: absolute;\n }\n\n .el-loading-spinner .circular {\n height: 42px;\n width: 42px;\n animation: loding-rotate 2s linear infinite;\n }\n\n .el-loading-spinner .path {\n animation: loading-dash 1.5s ease-in-out infinite;\n stroke-dasharray: 90, 150;\n stroke-dashoffset: 0;\n stroke-width: 2;\n stroke: #409eff;\n stroke-linecap: round;\n }\n\n @keyframes loading-rotate {\n 100% {\n transform: rotate (1turn);\n }\n }\n\n @keyframes loading-dash {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -40px;\n }\n\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -120px;\n }\n }\n </style>\n <div class="el-loading-mask">\n <div class="el-loading-spinner">\n <svg class="circular" viewBox="0 0 50 50">\n <circle class="path" cx="25" cy="25" r="20" fill="none"></circle>\n </svg>\n </div>\n </div>\n </div>\n <script type="module" src="/src/main.ts"></script>\n</body>打包优化
打包优化主要是对将之前element-plus的全局引入改为了按需引入方式了，其次就是将一些第三方库单独提出打包了，这样就不会像之前所有的文件都打成一个js入口文件中了，以下代码供参考。
import { defineConfig } from "vite";\nimport vue from "@vitejs/plugin-vue";\nimport vueJsx from "@vitejs/plugin-vue-jsx";\n// element-plus 按需导入\nimport AutoImport from 'unplugin-auto-import/vite'\nimport Components from 'unplugin-vue-components/vite'\nimport { ElementPlusResolver } from 'unplugin-vue-components/resolvers'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n vue(),\n vueJsx(),\n AutoImport({\n resolvers: [ElementPlusResolver()],\n }),\n Components({\n resolvers: [ElementPlusResolver()],\n }),\n ],\n build: {\n rollupOptions: {\n output: {\n manualChunks: {\n 'vue-router': ['vue-router'],\n 'vue': ['vue'],\n 'echarts': ['echarts'],\n 'countupjs': ['countup.js'],\n 'wangeditor': ['@wangeditor/editor'],\n '@wangeditor-editorforvue': ['@wangeditor/editor-for-vue'],\n 'axios': ['axios'],\n 'element-plus': ['element-plus'],\n },\n entryFileNames: 'assets/js/[name]-[hash].js',\n chunkFileNames: 'assets/js/[name]-[hash].js',\n assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',\n }\n }\n }\n});从上面的截图中可以看到目前最大的文件就是echarts库，其次就是编辑器库，不过由于服务器开启了gzip压缩，所以实际访问的时候是加载gzip文件的，截图中也显示vite在build的时候也会贴心的显示gzip文件大小，可以看到相比正常的文件gzip文件大小几乎只有原文件的三分之一，如果你的项目加载也比较慢，赶紧去试试开启gzip吧。