自定义src别名

(1) 在tsconfig.json中配置paths

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

(2) vite.config.ts中配置alias

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // vue
      // '@': resolve('.', './src') // react 
    }
  }
})

env环境变量 --- VITE

在开发环境和生产环境中，我们可能需要配置不同的环境变量，例如: 开发环境中的接口地址和生产环境中的接口地址是不一样的

假如我们有development uat(测试) prd(生产) 三个环境，我们可以在项目根目录(非src)下创建三个.env文件

分别为.env.development .env.uat .env.prd

在.env.development中配置开发环境的环境变量

# just a flag
NODE_ENV = 'development' // uat or prd 根据不同的环境配置不同的环境变量

# base api
VITE_APP_BASE_API = 'http://api.address:3000'

VITE_APP_BASE_PATH = '/api/'

其他环境的配置类似

类型加持

我们可以在项目src目录下创建一个env.d.ts文件，用来定义环境变量的类型

interface ImportMetaEnv {
  VITE_APP_BASE_API: string
  VITE_APP_BASE_PATH: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在package.json中配置

{
  "scripts": {
    "dev": "vite",
    "uat": "vite --mode uat",
    "prd": "vite --mode prd",
    "build:uat": "vite build --mode uat",
    "build:prd": "vite build --mode prd"
  }
}

我们要使用dev模式，就执行npm run dev，要使用uat模式，就执行npm run uat，要使用prd模式，就执行npm run prd

打包uat环境的代码，就执行npm run build:uat，打包prd环境的代码，就执行npm run build:prd

在项目中使用

const env = import.meta.env

// 获取环境变量
const { VITE_APP_BASE_API, VITE_APP_BASE_PATH } = env

// 获取环境变量的值
const baseApi = env.VITE_APP_BASE_API
const basePath = env.VITE_APP_BASE_PATH

GZIP压缩

要开启GZIP, 需要前端和服务器都配置

安装插件

// vite
npm install vite-plugin-compression -D

// webpack
npm install compression-webpack-plugin -D

配置插件

这是vite的配置

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

export default defineConfig({
  plugins: [
    compression({
      verbose: true, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用压缩
      threshold: 10240, // 只压缩大于 10KB 的文件
      algorithm: 'gzip', // 压缩算法，可选 'gzip'、'brotliCompress'、'deflate'、'deflateRaw'
      ext: '.gz', // 生成的文件扩展名
    })
  ]
})

这是webpack的配置

const CompressionWebpackPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionWebpackPlugin({
      test: /\.(js|css|html|svg)$/, // 需要压缩的文件类型
      threshold: 10240, // 只压缩大于 10KB 的文件
      minRatio: 0.8, // 只有压缩率小于 0.8 的文件才会被压缩
      algorithm: 'gzip', // 压缩算法
      filename: '[path][base].gz', // 生成的文件名
    })
  ]
}

Nginx配置服务器

http {
    # 其他配置 ...

    # Gzip 压缩配置
    gzip on;
    gzip_static on;  # 如果有 .gz 版本的文件，优先提供
    gzip_types text/plain text/css text/javascript application/json application/javascript application/xml application/x-font-ttf image/svg+xml;
    gzip_min_length 1024;  # 只压缩大于 1KB 的文件
    gzip_comp_level 6;  # 压缩级别（1-9，越高压缩越大但耗 CPU）
    gzip_vary on;

    # 其他配置...

    # 服务器配置
    server {
        listen 80;
        server_name yourdomain.com;

        # 如果你使用 HTTPS，可重定向 HTTP 到 HTTPS
        return 301 https://$host$request_uri;

        location / {
            root /var/www/html;  # 你的前端项目的路径（Next.js 或 Vue/React）
            index index.html;
            try_files $uri /index.html;
        }

        # 处理 .gz 资源
        location ~* \.(js|css|html|svg|json|woff2|ttf|eot|otf|ico|xml)(\.gz)$ {
            add_header Content-Encoding gzip;
            gzip_static on;
            expires max;
        }

        # 处理静态资源缓存
        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|mp4|webm|wav|ogg|webp|json)$ {
            expires 6M;
            access_log off;
            add_header Cache-Control "public, max-age=15552000, immutable";
        }
    }
}

Node.js配置服务器

npm install compression

const express = require('express')
const compression = require('compression')

const app = express()

// 开启 Gzip 压缩
app.use(compression())

// 提供静态资源
app.use(express.static('dist'))

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000')
})

配置好之后，重启服务器，访问网站，查看请求头，应该会看到Content-Encoding: gzip，说明已经开启了Gzip压缩

情况分析

✅ 1. 前端没有开启 gzip，但 Nginx 仍然开启了 gzip 如果 前端打包时没有生成 .gz 文件，但 Nginx 启用了 gzip on;，Nginx 仍然会在返回响应时 动态压缩 HTML、CSS、JS 文件。

📌 影响：

优点：浏览器仍然可以解压缩 gzip 资源，减少传输流量。 缺点：Nginx 需要 实时压缩，增加服务器 CPU 负担，影响性能。(我觉得用户量少的时候可以这样做, 加快这部分用户的访问速度)

❌ 2. 前端没有 gzip，Nginx 也没开 gzip 如果前端和 Nginx 都没开启 gzip，那么浏览器会直接加载 未压缩的 HTML、CSS、JS 文件。

📌 影响：

传输的数据量更大，页面加载速度更慢。 尤其是 JS/CSS 体积较大时，首屏时间明显增加。

效果对比

这是未开启GZIP的效果:

这是开启GZIP的效果:

可见效果显著, 用过的都说好

没用过的, 值得拥有

构建产物分析

npm i rollup-plugin-visualizer -D

vite配置

import visualizer from 'rollup-plugin-visualizer'

plugins: [
  react(),
  visualizer({
    open: true, // 自动打开浏览器显示分析报告
    filename: 'bundle-analysis.html', // 输出文件名
    gzipSize: true, // 显示 gzip 压缩大小
    brotliSize: true, // 显示 brotli 压缩大小
  })
]

查看效果

这样就可以针对体积大的文件进行针对优化了

例如CDN, 按需加载等