Vite Plugin项目优化汇总

一、打包性能优化

1. html 处理 vite-plugin-html
   vite-plugin-html 是一个专门为 Vite 构建的优化工具，用于将传统 HTML 文件作为输出文件使用。该插件基于 html-webpack-plugin 插件创建，但不依赖 webpack。通过使用该插件，可以优化 HTML 文件的构建和打包过程，提高项目性能。
   安装：npmininstall vite-plugin-html -D
   使用：import { …
   二、CDN加速
   CDN（Content Delivery Network）是一种用于加速网络内容传输的技术。通过使用 CDN，可以将资源文件缓存到全球各地的节点，从而加快用户访问速度。Vite 提供了 CDN 加速的插件，可以帮助开发者优化资源文件的加载速度。
   2.1、CDN管理插件vite-plugin-cdn-import
   首先下载CDN管理插件依赖：npm install vite-plugin-cdn-import —save-dev
   配置vite.config.ts，步骤与之前配置插件类似，先import依赖
   import importToCDN from “vite-plugin-cdn-import”或者import { Plugin as importToCDN } from “vite-plugin-cdn-import”
   再将插件配置到plugins中；
   再配置modules参数，参数的意义也很简单。
   name：表示模块的名称
   var：表示模块在全局作用域中的变量名，如果该属性未指定，则默认使用模块的名称作为变量名。
   path：表示模块在CDN中的路径。
   2.2、配置需要加速的依赖
   在项目中使用 CDN 加速资源文件时，需要将需要加速的资源文件配置到 CDN 中。可以通过修改资源文件的引用路径或使用特定的插件来实现。例如，可以将 CSS 文件的引用路径修改为 CDN 路径，或者使用特定的插件自动将资源文件上传到 CDN。