引言

在前端会经常提到性能优化，但是具体实施时可能有些不知道从何下手，这里在我项目实施优化的过程做个简单的分享

借助工具进行具体的性能数据分析

这里工具大概说几种常用的对于前端性能数据分析，可以使用一些专门针对前端开发的工具来监测和优化性能。以下是一些常用的前端性能分析工具（实际应用可选任意两种）：

1. Chrome DevTools：

Chrome浏览器自带的开发者工具（DevTools）提供了丰富的性能分析功能。通过在浏览器中打开DevTools并切换到"Performance"选项卡，你可以记录页面加载时间、分析JavaScript执行、检查内存使用等。

2. Lighthouse：

Lighthouse是一个由Google提供的开源工具，用于评估Web应用程序的质量。它提供了关于性能、可访问性、最佳实践等方面的建议。可以通过Chrome DevTools中的"Lighthouse"选项卡或使用命令行运行Lighthouse，最后会对当前页面进行一个评分，可以参考内容进行具体的优化

3. WebPageTest：

WebPageTest是一个在线性能测试工具，可以提供有关页面加载性能的详细报告。你可以选择测试地点、浏览器类型和连接速度，并查看关于页面加载时间、资源加载情况等的详细信息。点击这里进入

4. Webpack Bundle Analyzer：

如果你的前端项目使用Webpack作为打包工具，Webpack Bundle Analyzer可以帮助你分析和可视化构建后的文件大小，以便优化项目的性能，这里主要针对vite就不过多阐述

5.rollup-plugin-visualizer
rollup-plugin-visualizer 是 Rollup 构建工具的一个插件，因为Vite就是基于的rollup,所以可以在vite项目中用于生成构建可视化报告。它可以帮助你了解你的代码库的大小分布情况，找出哪些模块占用了最多的空间，以及其他有关构建大小的信息。以下是一些基本用法和配置示例：

js 复制代码

//安装 
npm install --save-dev rollup-plugin-visualizer


// rollup.config.js 配置

import visualizer from 'rollup-plugin-visualizer';

export default {
  // ...其他配置

  plugins: [
    // ...其他插件
    visualizer(
    { // 输出文件的名称，默认为 'stats.html'
    filename: 'bundle-stats.html', 
    // 是否以 gzip 格式输出报告 
    gzipSize: true, 
    // 是否显示文件大小的分布情况 
    sourcemap: true, 
    // npm build 时自动打开网页
    open: true
    }
    ),
  ],
};

这里根据上方的工具对我的项目进行优化前的分析截图记录
分析完成后记录对应的数据与优化后进行对比

针对最近项目的优化，关键性流程总结进行分享

借助工具进行具体的数据分析
通用性的性能优化方法
针对某个问题的优化

优化方法与内容

1.借助vite-plugin-compression 对代码进行压缩

借助插件 vite-plugin-compression，是一个用于 Vite 构建工具的插件，它的主要功能是在构建时对静态资源进行压缩，以减小文件体积，提高加载速度。压缩的静态资源包括 JavaScript、CSS、HTML、JSON 等文件,这里压缩的代码放到服务器后，需要后端配和在nginx的http模块中添加gzip，使用后可以减小原来体积的60%，提升效果明显

js 复制代码

//安装npm
install vite-plugin-compression --save-dev


// vite.config.js 中配置
import CompressionPlugin from 'vite-plugin-compression';

export default {
  plugins: [
    CompressionPlugin({
    // algorithm: 压缩算法，默认是 gzip，还可以选择 brotli 
    algorithm: 'gzip', 
    // threshold: 只有文件大小大于该值的文件才会被压缩，单位是字节 
    threshold: 10240, // 大于10kb的文件才会被压缩 
    // test: 一个正则表达式，用于匹配要被压缩的文件类型 
    test: /\.(js|css|html|json)$/, 
    // deleteOriginalAssets: 压缩后是否删除原始文件 
    deleteOriginalAssets: false,
    }),
  ],
};

2.按需引入

按需引入的优势在于可以减小初始加载体积；提高页面渲染速度；缩短构建时间；这里介绍关于使用vant 在vite 里的按需引入，官网也有具体介绍；在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件。

Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 @vant/auto-import-resolver，两者可以配合使用。

js 复制代码

npm i @vant/auto-import-resolver unplugin-vue-components -D
//基于 `vite` 的项目，在 `vite.config.js` 文件中配置插件
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

3.图片预加载

在lightHouse 性能分析时也会提出预加载所用图片，图片预加载是提前将图片加载到浏览器中这样可以在用户实际需要查看或使用这些图片时，减少加载时间，提升用户体验。以下是一些常见的图片预加载技术：

通过JavaScript进行预加载： 使用JavaScript创建新的Image对象，将要预加载的图片的URL赋给Image对象的src属性。当图片加载完成后，会触发onload事件。这样可以通过监听onload事件来判断图片是否已经加载完成。

js 复制代码

var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
    // 图片已加载完成，可以进行相关操作
};

使用CSS隐藏预加载的图片： 利用CSS将图片设置为不可见，但仍然加载到浏览器中。这样即使用户没有实际看到这些图片，它们也已经被加载到缓存中。

js 复制代码

.hidden-img {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

<img src="path/to/image.jpg" class="hidden-img" alt="Preloaded Image">

使用预加载框架或库： 有一些专门的预加载框架或库，可以简化预加载过程，提供更多的控制选项。例如，可以使用 PreloadJS、ImageLoader等库，它们提供了更丰富的功能，如并行加载、加载队列、错误处理等。

js 复制代码

var preload = new createjs.LoadQueue();
preload.loadFile('path/to/image.jpg');
preload.on('fileload', function(event) {
    // 图片已加载完成，可以进行相关操作
});

使用link标签预加载： HTML引入了<link>标签的preload属性，可以用于预加载资源，包括图片。这样可以在页面加载时提前获取资源，这里是我项目中使用写的一个方法。

js 复制代码

<script type="text/javascript">
      function preloadImages(imageUrls) {
        imageUrls.forEach((url) => {
          const link = document.createElement('link');
          link.rel = 'preload';
          link.as = 'image';
          link.href = url;
          document.head.appendChild(link);
        });
      }

      const urls = [
        'https://cdn-/images/4TsVuAHCci62Y4HfH8JWvD/reservation_icon.png',
        'https://cdn-/images/7ohPV1yNgBMFSjiqakXesd/demand_icon.png',
        'https://static.nio.com/fx-static/tvas-lark-app-new/clmei5b0g000c08922dbp1g15/vehicle_transfer.png',
        'https://static.nio.com/fx-static/tvas-lark-app-new/cll20kwe7000f088lhvau4ky3/software.png',
      ];

      preloadImages(urls);
 </script>

4.对于Vue Router，使用路由懒加载，使得每个页面的组件在需要时再进行加载

js 复制代码

const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue')

5.CDN方式引入利用vite-plugin-cdn-import

使用 CDN 引入前端资源可以显著提高网站的性能、同时降低服务器负载和带宽成本

js 复制代码

// vite.config.js
import ViteCdnImport from 'vite-plugin-cdn-import';

export default {
  plugins: [
    ViteCdnImport({
      // 在这里配置你需要引入的 CDN 资源
      // 例如，引入 Vant.js
      library: {
        name: 'vant',
        entry: 'https://cdn.jsdelivr.net/npm/vant@2.12.24/lib/vant.common.esm.js',
      },
    }),
  ],
};

使用 CDN 可以加速以下方面：

静态资源文件： 放置不常变且较大的文件，如图片、字体、CSS 和 JavaScript 文件，加速加载。
SDK 包： 存放不经常更改的前后端 SDK 包，如 Vant、Element Plus 等，提高下载速度。
第三方库和框架： 引入公共库，如 Lodash、Bootstrap 等，减轻服务器负担，加快加载速度。
大型图片和媒体文件： 对于大型图片和媒体文件，通过 CDN 减轻服务器负担，提高全球用户的加载速度。
不经常更改的页面或内容： 缓存公司主页、产品介绍页等不常变更的内容，提供更快的访问速度。

确保选择可信赖的 CDN 服务商，并采取适当的安全措施。监测 CDN 性能，根据需要进行调整和优化。

6.设置合适的缓存策略

keep-alive、本地存储（如localStorage、sessionStorage）以及cookie是在Vue项目中常用的优化手段，它们可以用于缓存组件、保存用户数据或状态，以及在前端存储一些必要的信息。下面分别介绍它们的应用和一些优化策略：

1. `keep-alive`：

keep-alive 是 Vue 提供的一个抽象组件，用于缓存不活动的组件实例，以避免反复销毁和重新创建。在一些场景下，使用 keep-alive 可以提高组件的加载性能。

xml 复制代码

vueCopy code
<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

优化策略：

仅对真正需要缓存的组件使用 keep-alive，不要将所有组件都包裹在其中，以避免不必要的内存占用。
使用 include 和 exclude 属性来精确控制哪些组件需要被缓存，哪些不需要。

2. 本地存储（localStorage 和 sessionStorage）：

localStorage 和 sessionStorage 提供了在浏览器端存储数据的能力，可以用于持久性数据存储和会话级别的数据存储。

优化策略：

将不频繁变化的数据（如用户配置、主题等）存储在 localStorage 中，以便用户下次访问时可以迅速加载。
使用 sessionStorage 存储一些会话级别的数据，这些数据只在当前会话期间有效。
谨慎使用存储大量数据，以防影响性能。

Cookie 是存储在用户计算机上的小型文本文件，可以用于在浏览器和服务器之间存储用户信息。

优化策略：

将一些用户标识信息（如用户ID、登录状态等）存储在 Cookie 中，以便在用户下次访问时能够辨识用户。
注意 Cookie 大小的限制，避免存储过大的数据。
使用安全标志（Secure）和 HttpOnly 标志，以增强安全性。

综合优化建议：

在使用这些缓存手段时，要注意敏感信息的处理，避免在前端存储敏感数据。
定期清理不再需要的缓存数据，以避免不必要的内存占用。
结合路由守卫等机制，合理触发和清理缓存。
在使用本地存储和 Cookie 时，注意浏览器对域名和协议的同源策略。

以上建议应根据具体业务需求和安全性要求来进行调整。在使用这些特性时，可以结合 Vue 的生命周期钩子、路由守卫和相关插件，以更好地管理和优化应用的状态和性能。

总结

以上关于项目中通用优化内容分享较多，针对不同需要优化点需要具体分析

vite + vue3 关于项目性能优化

引言

借助工具进行具体的性能数据分析

优化方法与内容

1.借助vite-plugin-compression 对代码进行压缩

2.按需引入

3.图片预加载

4.对于Vue Router，使用路由懒加载，使得每个页面的组件在需要时再进行加载

5.CDN方式引入利用vite-plugin-cdn-import

6.设置合适的缓存策略

1. keep-alive：

优化策略：

2. 本地存储（localStorage 和 sessionStorage）：

优化策略：

3. Cookie：

优化策略：

总结

1. `keep-alive`：