<%- title %>

--- highlight: a11y-dark --- # 一、vite的插件推荐 ## `rollup-plugin-visualizer` 打包分析插件 * 安装 ```js npm install rollup-plugin-visualizer -D ``` * vite配置 ```js // vite.config.js import { defineConfig } from 'vite' import { visualizer } from 'rollup-plugin-visualizer' export default defineConfig({ plugins: [visualizer()] }) ``` 打包后，会在根目录下生成一个 `stats.html`文件，用浏览器打开后，如下图： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ca2bd0f46284ae683870321d564ec4d~tplv-k3u1fbpfcp-watermark.image#?w=809\&h=360\&s=106162\&e=png\&b=b77b7b) ## `vite-plugin-restart` 通过监听文件修改，自动重启 vite 服务最常用的场景就是监听 vite.config.js 和 .env.development 文件，我们知道，修改 vite 配置文件和环境配置文件，是需要重启 vite 才会生效，通过这个插件，我们将从反复重启中解脱出来安装 ```js npm i vite-plugin-restart -D ``` 配置：vite.config.ts ```js import ViteRestart from 'vite-plugin-restart' export default { plugins: [ ViteRestart({ restart: [ 'my.config.[jt]s', ] }) ], }; ``` ## `unplugin-vue-components` 组件自动按需导入安装： ```js npm i unplugin-vue-components -D ``` vite.config.ts ```js import Components from 'unplugin-vue-components/vite' // ui库解析器，也可以自定义，需要安装相关UI库，unplugin-vue-components/resolvers // 提供了以下集中解析器，使用的时候，需要安装对应的UI库，这里以vant示例 // 注释的是包含的其他一些常用组件库，供参考 import { // ElementPlusResolver, // AntDesignVueResolver, VantResolver, // HeadlessUiResolver, // ElementUiResolver } from 'unplugin-vue-components/resolvers' export default ({ mode }) => defineConfig({ plugins: [ Components({ dirs: ['src/components'], // 目标文件夹 extensions: ['vue','jsx'], // 文件类型 dts: 'src/components.d.ts', // 输出文件，里面都是一些import的组件键值对 // ui库解析器，也可以自定义，需要安装相关UI库 resolvers: [ VantResolver(), // ElementPlusResolver(), // AntDesignVueResolver(), // HeadlessUiResolver(), // ElementUiResolver() ], }) ] }) ``` 原先引用组件的时候需要在目标文件里面import相关组件，现在就可以直接使用无需在目标文件import了，注意大小写，组件都是大写开始的 ## `vite-plugin-style-import` 当你使用unplugin-vue-components来引入ui库的时候，message, notification，toast 等引入样式不生效安装vite-plugin-style-import，实现message, notification，toast 等引入样式自动引入安装： ```js npm i vite-plugin-style-import -D ``` vite.config.ts ```js import styleImport, { // AndDesignVueResolve, VantResolve, // ElementPlusResolve, // NutuiResolve, // AntdResolve } from 'vite-plugin-style-import' export default ({ mode }) => defineConfig({ plugins: [ styleImport({ resolves: [ // AndDesignVueResolve(), VantResolve(), // ElementPlusResolve(), // NutuiResolve(), // AntdResolve() ], }) ] }) ``` 注释部分为常用的UI组件库，按照自己的需要引入 ## `unplugin-auto-import` vue3等插件 hooks 自动引入支持`vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core`等自动引入效果 ```js // 引入前 import { ref, computed } from 'vue' const count = ref(0) const doubled = computed(() => count.value * 2) //引入后 const count = ref(0) const doubled = computed(() => count.value * 2) ``` 安装 ```js npm i unplugin-auto-import -D ``` vite.config.ts ```js import AutoImport from 'unplugin-auto-import/vite' export default ({ mode }) => defineConfig({ plugins: [ AutoImport({ imports: ['vue', 'vue-router', 'vuex', '@vueuse/head'], // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts' dts: 'src/auto-import.d.ts' }), ] }) ``` ## `vite-plugin-svg-icons` 用于生成 svg 雪碧图，方便在项目中使用 .svg 文件按照文档配置好后，搭配阿里巴巴矢量图标库使用，只需把下载好的 svg 文件丢到指定目录，然后就可以项目中愉快的使用了安装： ```js npm i vite-plugin-svg-icons -D ``` vite.config.ts配置 ```js import { defineConfig,loadEnv } from 'vite' import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; const path = require("path"); export default ({ mode }) => defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ // Specify the icon folder to be cached iconDirs: [path.resolve(process.cwd(), 'src/svg')], // Specify symbolId format symbolId: 'icon-[dir]-[name]' }) ] }) ``` main.ts添加 ```js import 'virtual:svg-icons-register' ``` 新建svgIcon.vue ```js ``` 在目录src下新建svg文件夹，在阿里巴巴矢量图标库下载order.svg图标，放入svg文件夹内使用： ```js ``` ## `vite-plugin-html` 一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件通过搭配 .env 文件，可以在开发或构建项目时，对 index.html 注入动态数据，例如替换网站标题安装： ```js npm i vite-plugin-html -D ``` index.html ```js <%- title %>

<%- injectScript %> ``` vite.config.ts ```js import { defineConfig,loadEnv} from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' export default ({ mode }) => defineConfig({ // mode 环境变量名，若配置有.env.test，启动时 --mode test，这里的mode就是test plugins: [ createHtmlPlugin({ minify: true, /** * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除 * @default src/main.ts */ entry: '/src/main.ts', /** * 需要注入 index.html ejs 模版的数据 */ inject: { data: { // 查找.env.test文件里面的VITE_PROJECT_TITLE，请以VITE_标识开头 title: loadEnv(mode, process.cwd()).VITE_PROJECT_TITLE, injectScript: ``, }, }, }) ] }) ``` ## `vite-plugin-compression` 使用 gzip 或者 brotli 来压缩资源安装 ```js npm i vite-plugin-compression -D ``` vite.config.ts ```js import { defineConfig,loadEnv} from 'vite' import viteCompression from 'vite-plugin-compression'; export default ({ mode }) => defineConfig({ plugins: [ viteCompression() ] }) ``` ## `vite-plugin-imagemin` 打包压缩图片安装 ```js npm i vite-plugin-imagemin -D ``` 安装失败或者无法安装，尝试用淘宝源去安装安装后，我发现我的4M图片压缩后，文件被旋转了90度，这什么鬼？ ```js import { defineConfig,loadEnv} from 'vite' import viteImagemin from 'vite-plugin-imagemin' export default ({ mode }) => defineConfig({ plugins: [ viteImagemin({ gifsicle: { // gif图片压缩 optimizationLevel: 3, // 选择1到3之间的优化级别 interlaced: false, // 隔行扫描gif进行渐进式渲染 // colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。 }, optipng: { // png optimizationLevel: 7, // 选择0到7之间的优化级别 }, mozjpeg: {// jpeg quality: 20, // 压缩质量，范围从0(最差)到100(最佳)。 }, pngquant: {// png quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。 speed: 4, // 压缩速度，1(强力)到11(最快) }, svgo: { // svg压缩 plugins: [ { name: 'removeViewBox', }, { name: 'removeEmptyAttrs', active: false, }, ], }, }), ] }) ``` ## `vite-plugin-purge-icons` 此插件是可以让我们很方便高效的使用[Iconify](https://iconify.design/)中所有的图标（目前没有用过...） ## `@vitejs/plugin-vue-jsx` 此插件支持在vue3中使用jsx/tsx语法安装 ```js npm i @vitejs/plugin-vue-jsx ``` vite.config.ts ```js import { defineConfig,loadEnv} from 'vite' import vuejsx from "@vitejs/plugin-vue-jsx" export default ({ mode }) => defineConfig({ plugins: [ vuejsx() ] }) ``` jsx文件：（jsx组件中自动跳过生命周期，即jsx中没有生命周期，在父组件onBeforeMount后执行） ```js const component = (props:any,context:any) => { console.log(props) const onClick = () => { context.emit('update') } return

onClick()} > 我是jsx函数组件{props.text}

} export default component ``` ## `vite-plugin-vue-setup-extend` setup语法糖name增强，使vue3语法糖支持name属性 `vue3语法糖默认是没有name属性的，在我们使用keep-alive的时候需要用到name` 安装 ```js npm i vite-plugin-vue-setup-extend -D ``` vite.config.ts ```js import { defineConfig} from 'vite' import vueSetupExtend from 'vite-plugin-vue-setup-extend' export default ({ mode }) => defineConfig({ plugins: [ vueSetupExtend() ] } ``` 使用 ```js ``` ## `vitejs-plugin-legacy` Vite默认的浏览器支持基线是原生ESM。该插件为不支持原生ESM的传统浏览器提供支持 ## `@vitejs/plugin-vue` vite支持vue开发 ## `vite-plugin-vue-images` 自动导入图像，同级目录的文件名不能重复！安装 ```js npm i vite-plugin-vue-images -D ``` vite.config.ts ```js import { defineConfig,loadEnv} from 'vite' import ViteImages from 'vite-plugin-vue-images' export default ({ mode }) => defineConfig({ plugins: [ ViteImages({ dirs: ['src/assets'], // 图像目录的相对路径 extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'], // 有效的图像扩展 customResolvers:[], // 覆盖名称->图像路径解析的默认行为 customSearchRegex: '([a-zA-Z0-9]+)', // 重写搜索要替换的变量的Regex。 }), ] ``` 假设有以下文件及路径 logo.png： src/assets/logo.png name1.jpg： src/assets/test/name1.jpg 使用方式： ```js ``` 插件将转换为： ```js ``` ## `IE和旧版chrome兼容` ```js npm install @vitejs/plugin-legacy -D ``` vite.config.js页面引入和使用 ```js //引入 import legacyPlugin from '@vitejs/plugin-legacy' //在plugins配置数组里添加legacy插件 plugins: [ legacyPlugin({ targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个 additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件 }) ], ``` ## `vue-global-api` unplugin-auto-import插件的继承者，解决因为它的自动导入导致的eslint报错安装 ```js npm i vue-global-api ``` main.ts添加 ```js import 'vue-global-api' ``` # 二、vite环境基本配置 ```js import { defineConfig } from "vite"; import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import vue from "@vitejs/plugin-vue"; import postcssPxToViewport from 'postcss-px-to-viewport' import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; import path from "path"; export default defineConfig({ plugins: [ vue(), //页面自动引入vue 插件 AutoImport({ imports: ["vue"], dts: "src/auto-import.d.ts", }), //element plus按需自动引入 AutoImport({ resolvers: [ElementPlusResolver()], }), //element plus按需自动引入 Components({ resolvers: [ElementPlusResolver()], }), ], css: { postcss: { plugins: [ postcssPxToViewport({ viewportWidth: 1920 //---基于1920宽度为100vw }) ] } }, build: { minify: "terser", // 必须开启：使用terserOptions才有效果 terserOptions: { compress: { //生产环境时移除console drop_console: true, drop_debugger: true, }, }, }, resolve: { alias: { "@": path.resolve(__dirname, "src"), // 注意一定不要随意命名，a b c这样的，项目的目录也不能为关键字保留字！！ "comp": resolve(__dirname, "src/components"), // 配置图片要这样引用也可以自定义方法引入图片静态资源 "/img": "./src/assets", }, }, // 跨域 server: { //使用IP能访问 host: "0.0.0.0", // 热更新 hmr: true, //设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口 strictPort: false, //自定义代理规则 proxy: { // 选项写法 "/api": { target: "", changeOrigin: true, rewrite: (path) => path.replace(/^/api/, ""), }, }, }, }); ``` # vite常用基本配置 ```js { root: process.cwd(), // 项目根目录（index.html 文件所在的位置）, base: '/', // 开发或生产环境服务的公共基础路径配置引入相对路径 mode: 'development', // 模式 plugins: [vue()], // 需要用到的插件数组 publicDir: 'public', // 静态资源服务的文件夹 cacheDir: 'node_modules/.vite', // 存储缓存文件的目录 resolve: { alias: [ // 文件系统路径别名 { find: //@//, replacement: pathResolve('src') + '/' } ], dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本 conditions: [], // 解决程序包中情景导出时的其他允许条件 mainFields: [], // 解析包入口点尝试的字段列表 extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表 preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份 }, css: { modules: { scopeBehaviour: 'global' | 'local', // ... }, postcss: '', // 内联的 PostCSS 配置如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源 preprocessorOptions: { // css的预处理器选项 scss: { additionalData: `$injectedColor: orange;` } } }, json: { namedExports: true, // 是否支持从.json文件中进行按名导入 stringify: false, // 开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入 }, esbuild: { // 最常见的用例是自定义 JSX jsxFactory: 'h', jsxFragment: 'Fragment' }, assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式作为静态资源处理 logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent' clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息 envDir: '/', // 用于加载 .env 文件的目录 envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中 server: { host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址 port: 5000, // 指定开发服务器端口 strictPort: true, // 若端口已被占用则会直接退出 https: false, // 启用 TLS + HTTP/2 open: true, // 启动时自动在浏览器中打开应用程序 proxy: { // 配置自定义代理规则 '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^/api/, '') } }, cors: true, // 配置 CORS force: true, // 强制使依赖预构建 hmr: { // 禁用或配置 HMR 连接 // ... }, watch: { // 传递给 chokidar 的文件系统监听器选项 // ... }, middlewareMode: '', // 以中间件模式创建 Vite 服务器 fs: { strict: true, // 限制为工作区 root 路径以外的文件的访问 allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务 deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单 }, origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin }, build: { target: ['modules'], // 设置最终构建的浏览器兼容目标 polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill outDir: 'dist', // 指定输出路径 assetsDir: 'assets', // 指定生成静态文件目录 assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码 cssCodeSplit: true, // 启用 CSS 代码拆分 cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致 sourcemap: false, // 构建后是否生成 source map 文件 lib: {}, // 构建为库 manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件 ssrManifest: false, // 构建不生成 SSR 的 manifest 文件 ssr: undefined, // 生成面向 SSR 的构建 write: true, // 启用将构建后的文件写入磁盘 emptyOutDir: true, // 构建时清空该目录 brotliSize: true, // 启用 brotli 压缩大小报告 chunkSizeWarningLimit: 500, // chunk 大小警告的限制 watch: null, // 设置为 {} 则会启用 rollup 的监听器 // minify:false, // 表示打包后的文件内容不进行压缩，方便阅读 minify: "terser", // esbuild | terser 指定使用哪种混淆器 terserOptions: { compress: { // 打包的时候可以移除console和debugger drop_console: true, drop_debugger: true, }, }, // 传递给 minify: "terser" 的更多 minify 选项 preview: { port: 5000, // 指定开发服务器端口 strictPort: true, // 若端口已被占用则会直接退出 https: false, // 启用 TLS + HTTP/2 open: true, // 启动时自动在浏览器中打开应用程序 proxy: { // 配置自定义代理规则 '/api': { target: 'http://jsonplaceholder.typicode.com', changeOrigin: true, rewrite: (path) => path.replace(/^/api/, '') } }, cors: true, // 配置 CORS }, optimizeDeps: { entries: [], // 指定自定义条目——该值需要遵循 fast-glob 模式 exclude: [], // 在预构建中强制排除的依赖项 include: [], // 可强制预构建链接的包 keepNames: false, // true 可以在函数和类上保留 name 属性 }, ssr: { external: [], // 列出的是要为 SSR 强制外部化的依赖, noExternal: '', // 列出的是防止被 SSR 外部化依赖项 target: 'node', // SSR 服务器的构建目标 }, rollupOptions: { // 自定义底层的 Rollup 打包配置 output: { chunkFileNames: 'js/[name]-[hash].js', // 打包后的文件名称 entryFileNames: 'js/[name]-[hash].js', // 打包后的入口文件名称 // assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像字体，图片等指定静态资源文件名（不含导出的代码） // assetFileNames:"[name][extname]", // 对打包出来的资源文件进行分类，分别放到不同的文件夹内 // assetFileNames(chunk) { // console.log(chunk.name); // // css // if (chunk.name?.endsWith('.css')) { // return 'css/[name]-[hash].[ext]'; // } // // image // if (/.(png|jpg|gif|jpeg|webp|svg)$/.test(chunk.name || '')) { // return 'images/[name]-[hash].[ext]'; // } // return `other/[name]-[hash].[ext]`; // }, // 对打包出来的资源文件进行分类，分别放到不同的文件夹内 assetFileNames(assetsInfo) { // css样式文件 if (assetsInfo.name?.endsWith(".css")) { return "css/[name]-[hash].css"; } // 字体文件 const fontExts = [".ttf", ".otf", ".woff", ".woff2", ".eot"]; if (fontExts.some((ext) => assetsInfo.name?.endsWith(ext))) { return "font/[name]-[hash].[ext]"; } // 图片文件 const imgExts = [".png", ".jpg", ".jpeg", ".webp", ".gif", ".icon"]; if (imgExts.some((ext) => assetsInfo.name?.endsWith(ext))) { return "img/[name]-[hash].[ext]"; } // SVG类型的图片文件 const imgSvg = [".svg",]; if (imgSvg.some((ext) => assetsInfo.name?.endsWith(ext))) { return "assest/icons/[name].[ext]"; } // 视频文件 const videoExts = [".mp4", ".avi", ".wmv", ".ram", ".mpg", "mpeg"]; if (videoExts.some((ext) => assetsInfo.name?.endsWith(ext))) { return "video/[name]-[hash].[ext]"; } // 其它文件: 保存在 assets/图片名-哈希值.扩展名 return "assets/[name]-[hash].[ext]"; }, // 打包的文件进行拆包处理/静态资源分拆打包 manualChunks:(id)=>{ // 这个ID，就是所有文件的绝对路径 if(id.includes("node_modules")){ // 因为 node_modules 中的依赖通常是不会改变的 // 所以直接单独打包出去 // 这个return 的值就是打包的名称 return "vendor"; } }, // 或者 manualChunks(id) { //静态资源分拆打包 if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } } }, } ``` # 三、Vite构建的Vue3+Ts项目打包优化 ### 前置工具安装插件 **rollup-plugin-visualizer** 它是一个打包体积分析插件，对应webpack中的**webpack-bundle-analyzer**，可以看到打包后的所有文件大小 ### 配置打包文件分类输出 ```js build: { rollupOptions: { output: { chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称 entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称 assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像字体，图片等 } } } ``` ### js最小拆分包 * 配置vite.config 的 **output** 属性 * 让打开那个页面，加载那个页面的js ，让之间的关联足够小 ```js output: { // 最小化拆分包 manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } } }, ``` ### 代码压缩+剔除console+debugger **esbuild** or **terser**, 默认启动的是 esbuild， esbuild比terser快 20-40 倍，压缩率只差 1%-2% #### esbuild：只删除 **console.log** 和**debugger** ```js import {defineConfig} from "vite"; export default defineConfig({ esbuild:{ pure: ['console.log'], // 删除 console.log drop: ['debugger'], // 删除 debugger } }) ``` 删除所有的**console**语句和**debugger**，包括console.log、console.warn、console.error等 ```js import {defineConfig} from "vite"; export default defineConfig({ esbuild:{ drop: ['console,'debugger'], // 删除所有的console 和 debugger } }) ``` ### terser： vite 4.X 版本已经不集成 terser，需要自行下载 ```js npm i terser -D ``` 只删除 **console.log** 和 **debugger** ```js import { defineConfig } from "vite"; export default defineConfig({ build: { minify: 'terser', // 启用 terser 压缩 terserOptions: { compress: { pure_funcs: ['console.log'], // 只删除 console.log drop_debugger: true, // 删除 debugger } } } }) ``` 删除所有的**console**语句和**debugger**，包括console.log、console.warn、console.error等 ```js import {defineConfig} from "vite"; export default defineConfig({ build: { minify: 'terser', // 启用 terser 压缩 terserOptions: { compress: { drop_console: true, // 删除所有 console drop_debugger: true,// 删除 debugger } } } }) ``` ### 文件压缩 ```js npm i vite-plugin-compression -D ``` ```js // build.rollupOptions.plugins[] viteCompression({ verbose: true, // 是否在控制台中输出压缩结果 disable: false, threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反 algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw'] ext: '.gz', deleteOriginFile: true // 源文件压缩后是否删除(我为了看压缩后的效果，先选择了true) }) ``` 当请求静态资源时，服务端发现请求资源为gzip的格式时，应该设置响应头 content-encoding: gzip 。因为浏览器解压也需要时间，所以代码体积不是很大的话不建议使用 gzip 压缩 ### 图片资源压缩 ```js npm i vite-plugin-imagemin -D ``` ### 在vite.config.js里面配置 ```js import viteImagemin from 'vite-plugin-imagemin' plugin: [ viteImagemin({ gifsicle: { optimizationLevel: 7, interlaced: false }, optipng: { optimizationLevel: 7 }, mozjpeg: { quality: 20 }, pngquant: { quality: [0.8, 0.9], speed: 4 }, svgo: { plugins: [ { name: 'removeViewBox' }, { name: 'removeEmptyAttrs', active: false } ] } }) ] ``` ### 按需加载优化一些第三方包的体积比如loadsh，项目中只用到了{cloneDeep 、throttle、debouce}这个几个函数，但是由于lodash是common.js版本不支持按需引入，500多k全部打包进来了 lodash-es 是 lodash 的 es modules 版本，是着具备 ES6 模块化的版本，支持按需导入，**使用loadsh-es代替lodash，按需引入，减少打包体积** ```js import _ from 'lodash-es'; // 将会把整个lodash的库引入到项目 import { cloneDeep } from 'lodash-es'; // 将只会把cloneDeep引入到项目 ``` ### CDN加速安装插件 ```js npm install rollup-plugin-external-globals -D ``` vite.config.ts里面配置 ```js import externalGlobals from 'rollup-plugin-external-globals'; const globals = externalGlobals({ moment: 'moment', 'video.js': 'videojs', jspdf: 'jspdf', xlsx: 'XLSX', }); export default defineConfig({ build: { rollupOptions: { external: ['moment', 'video.js', 'jspdf','xlsx'], plugins: [globals], } } }); ``` 在 index.html 模版中引入对应库的CDN。具体的CDN链接根据自己需要去官网或是CDN网站查询，**cdn网站：** 采用CDN引入的弊端：\ 1、可靠性：使用CDN引入外部模块意味着依赖于第三方服务商的可用性和稳定性。如果CDN服务商发生故障或者网络问题，可能会导致外部模块无法加载，影响网站的正常运行 2、安全性：使用CDN引入外部模块需要信任第三方服务商，因为模块实际上是从服务商的服务器上加载的。如果服务商被黑客攻击或者恶意篡改了模块的内容，可能会导致安全问题 3、性能：CDN服务通常会根据用户的地理位置选择最近的节点进行内容分发，这样可以减少网络延迟和提高访问速度。但是如果用户所在地区的CDN节点发生故障或者网络拥堵，可能会导致加载速度变慢甚至加载失败 4、版本控制：使用CDN引入外部模块可能会导致版本控制的问题。如果模块的版本发生变化，CDN服务商可能会立即更新节点上的内容，这样可能会导致网站出现兼容性问题或者功能异常 ### CDN加速 ```js npm install vite-plugin-cdn-import --save-dev ``` 引入到vite.config.ts ```js import importToCDN, { autoComplete } from "vite-plugin-cdn-import"; ``` 使用 ```js plugins: [ importToCDN({ modules: [ { name: "vue", var: "Vue", path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js", }, { name: "vuex", var: "Vuex", path: "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js", }, { name: "vue-router", var: "VueRouter", path: "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js", }, { // 引入cdn element-plus name: "element-plus", var: "ElementPlus", path: "https://unpkg.com/element-plus", css: "https://unpkg.com/element-plus/dist/index.css", }, ], }), ], ``` ### SEO优化，vite实现预渲染（没有试过） ```js npm i vite-plugin-prerender -D ``` 在vite.config.js中使用 ```js import vitePrerender from 'vite-plugin-prerender' import path from 'path' export default () => { return { plugins: [ vitePrerender({ // Required - The path to the vite-outputted app to prerender. staticDir: path.join(__dirname, 'dist'), // Required - Routes to render. routes: ['/', '/chat', '/design'], }), ], } } ``` 打包完成后，会根据配置的路由地址，在dist文件中生成对应的index.html文件【在dist根目录下、dist/chat、dist/design 目录下都会生成index.html文件】