前端性能优化

性能优化参考链接

1. 路由懒加载

/* webpackChunkName: 'home' */ 可以把路由对应js,从打包生成的 app.xxx.js中分离，出home.xxx.js.能解决首页面加载慢问题

component: () => import(/* webpackChunkName: 'home' */ '@/views/viewLayout/ViewLayout.vue')

2. 组件懒加载

使用defineAsyncComponent，/*webpackChunkName: "dialogInfo" */ 可以缩小文件大小（通过分离代码，形成新文件）

<script setup lang="ts">
    const SearchList = defineAsyncComponent(() => import( /*webpackChunkName: "dialogInfo" */
		'@/components/SearchList.vue'))
</script>
<template>
    <SearchList />
</template>

3. 首页白屏 使用骨架屏插件完成

4. 图片优化见参考链接

1）图片的动态裁剪 2）图片懒加载， 使用data-src 属性，滚动到可视区域， img 赋值src属性 3）svg图标 4）小图片，使用base64格式