1. CDN在线加速

内容分发网络（Content Delivery Network，简称 CDN），是构建在数据网络上的一种分布式内容分发网，它可以让用户从最近的服务器请求资源，以提升网络请求的响应速度。

通常情况下，我们请求依赖模块使用 CDN ，而请求项目代码依然使用自己的服务器。

在 Vite + Vue3 项目开发过程中，像 element-plus、lodash-es 等工具库，会有很大的文件依赖。我们可以尝试通过配置 CDN 的方式来减轻"单系统"的请求压力。（一般我们的项目只有一个服务器，称为单系统）

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址

安装 CDN 管理插件

# npm 方式
npm i vite-plugin-cdn-import -D

# yarn 方式
yarn add vite-plugin-cdn-import -D

以 lodash-es 为例，在 vite.config.ts 文件中，配置对应 module 的 CDN

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 使用 CDN 插件
import vitePluginCDN from 'vite-plugin-cdn-import'

export default defineConfig({
  // plugins 需要用到的插件数组
  plugins: [
    vue(),
    vitePluginCDN({
      // 配置需要 CDN 加速的模块
      modules: [
        { name: 'lodash-es', var: '_', path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'}
      ]
    })
  ]
})

通过 npm run build 命令构建成功后，Vite 会自动将 CDN 资源通过 script 标签插入到 html 中（如下图）。这样请求 lodash 资源就会产生加速 buff，而且项目的打包体积也会大大减少。

使用 CDN 的问题：一但依赖网站出现问题，我们的项目也就不行了，建议留下备用方案，以便维护。如果公司有条件，可以使用公司自己的 CDN 以确保安全性

2. gzip压缩

gzip 是一种压缩格式，使用其可大幅减小代码体积，提升网络性能。在项目打包、Web服务中常被配置开启。

gzip 在当前项目中的开启方式比较简单，通过配置 vite-plugin-compression 即可：

安装插件：

# npm 方式
npm i vite-plugin-compression -D

# yarn 方式
yarn add vite-plugin-compression -D

在 vite.config.ts 文件中配置如下

import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [viteCompression()]
})

配置参数

• filter：过滤器，对哪些类型的文件进行压缩，默认为/.(js|mjs|json|css|html)$/i
• verbose: true：是否在控制台输出压缩结果，默认为 true
• threshold ：启用压缩的文件大小限制，单位是字节，默认为 0
• disable : false：是否禁用压缩，默认为 false
• deleteOriginFile ：压缩后是否删除原文件，默认为 false
• algorithm ：采用的压缩算法，默认是 gzip
• ext ：生成的压缩包后缀

参数配置方式

viteCompression({
    verbose: true, // 是否在控制台输出压缩结果
    disable: false, // 是否禁用,相当于开关在这里
    threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB  那我们这里相当于 9kb多吧，就会压缩
    algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
    ext: '.gz', //文件后缀
})

执行打包命令，控制台信息如下：

不难发现，经过 gzip 压缩后，文件体积大大缩小。

把打包好的项目放入服务器目录，服务器开启 gzip 服务，这样通过项目地址就可以在浏览器中进行访问了。Nginx 配置如下：

server{
    #gzip
    #开启gzip功能
    gzip on;
    #开启gzip静态压缩功能
    gzip_static on;
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10 
    gzip_comp_level 5;
    #gzip 压缩类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
    gzip_vary on; 
}

当在浏览器中请求被压缩的静态资源时，服务端会根据浏览器支持的类型，设置响应头 content-encoding:gzip，告诉浏览器以何种方式进行解压。

需要注意的是，浏览器解压也是需要时间的，如果项目体积不是很大的话，不建议采用 gzip 进行压缩。

使用浏览器访问服务器中的项目，打开控制台 -> 网络，如下：

注：如果没有的话，请右击该栏 -> 响应头配置（Header Options -> 响应标头（Response Headers） -> 内容编码（Content-Encoding）进行配置

3. 图片压缩

根据项目对清晰度的要求，我们可以使用 vite-plugin-imagemin 插件，对图片进行适当压缩

安装

# npm 方式
npm i vite-plugin-imagemin -D

# yarn 方式
yarn add vite-plugin-imagemin -D

在vite.congi.ts 中配置各种图片压缩参数

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
  	vue(),
    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
          }
        ]
      }
    })
  ]
})