vue3项目首次打开页面加载慢优化
大家好我是图恩，最近发现后台管理系统首次打开比较慢，为了在页面没显示内容的时候让用户感觉到是在加载，为此做了一些优化。
因为最近代码更新相对比较频繁，在本地打完包后上传到服务器上，首次打开的时候发现页面一片空白，由于之前对打包也未作优化，导致页面在加载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吧。
发表评论 (审核通过后显示评论)：