vue项目优化

Vue项目优化：
    单页应用首屏加载慢，首屏加载是指，用户在浏览器输入网址后，首屏内容的渲染完成，是用户体验中最重要的环节
    可以通过减少单一文件请求体积，降低单台服务器的并发请求数量来进行优化

    开发阶段：
        v-for设置合理的key不要用index
        组件频繁切换使用v-show
        KeepAlive组件缓存，加在RouterView上并用include指定需要缓存的页面
        销毁前及时清理，防止内存泄漏：自定义事件、定时器、三方库
        computed缓存复杂计算结果
        防抖（按钮防重复点击，搜索框监听input事件触发搜索接口），节流（监听resize事件重画Echarts图表，监听scroll显示隐藏返回顶部按钮）
        路由页面组件懒加载
        设置静态的骨架屏，直接放在index.html中的根容器中，体验/感知优化

    打包阶段：
        项目使用Vite + Vue3开发
        Vite打包使用Rollup，区别于之前Vue CLI脚手架使用的Webpack
        Vue3、Vue Router4以及Pinia本身支持Tree Shaking，API默为按需引入，即只打包代码中使用到的API

        构建分析，分析依赖模块的大小占比，可以让我们更有针对性的进行体积优化
            npm i rollup-plugin-visualizer -D
            import { visualizer } from 'rollup-plugin-visualizer';
            plugins: [visualizer({ open: true })] // 模块放在插件最后
            分析结果查看根目录下生成的stats.html

        CDN加速，CDN是内容分发网络，让用户从最近的远程服务器请求资源，将三方库从CDN引入，可以减少构建时间，并且提高生产环境中页面加载速度
            npm i vite-plugin-cdn-import -D
            import { Plugin as importToCDN } from 'vite-plugin-cdn-import';
            plugins: [importToCDN({
              modules: [{
                name: '@wangeditor/editor',
                var: 'wangEditor',
                path: 'https://unpkg.com/@wangeditor/editor@5.1.23/dist/index.js'
              }, {
                name: 'echarts',
                var: 'echarts',
                path: 'https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js'
              }]
            })]

        依赖文件分包，将三方资源库相关代码单独打包成一个单独的vender文件
            build: {
              rollupOptions: {
                output: {
                  manualChunks(path) {
                    if (path.includes('node_modules')) return 'vender';
                  }
                }
              }
            }

        前端生成gzip压缩文件，这样就不需要服务器动态生成了，可以节约服务器性能消耗
            npm i vite-plugin-compression -D
            import gzipCompression from 'vite-plugin-compression';
            plugins: [gzipCompression()]

        图片压缩，Vite会默认将小于4KB的图片转成内联的base64，减少HTTP请求数量，对于其他图片，可以根据项目对清晰度的要求，进行适当压缩，以加快加载速度
            npm i vite-plugin-image-optimizer sharp svgo -D;
            import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
            plugins: [ViteImageOptimizer({
              png: { quality: 80 },
              jpeg: { quality: 80 },
              jpg: { quality: 80 }
            })]

        清理代码中的console.log，Vite的默认混淆器使用Esbuild
            esbuild: {
              drop: ['console', 'debugger']
            }