Vue on Liangweidong's blog

Vite 7 构建工具：从入门到 React / Vue / TypeScript 工程化实战

Tue, 15 Jul 2025 00:00:00 +0800

为什么写这篇：Vite 5+ 在 2023 年起成为新项目默认；Vite 6（2024-11）性能再次飞跃；Vite 7（2025-06）支持 Rolldown 实验性打包器。本文用最新 Vite 7 + React/Vue + TS 走通完整工程化流程，附带 monorepo 实战。

适用读者：要从 Webpack 迁到 Vite 的工程师；想给新项目选 Vite 的负责人；想用 Vite 7 最新特性（Rolldown / 环境变量）的中高级前端。

前置知识：会用 npm/pnpm；了解 React 或 Vue 基础；知道 TypeScript 是什么。

Vite 是什么
环境要求
创建 Vite 项目：5 种模板
项目结构详解
Vite 核心配置文件
TypeScript 集成
路径别名 @ 配置
反向代理与 HMR
多环境变量 .env 管理
生产构建：Rollup 与 Rolldown 实验
代码风格：ESLint + Prettier
VSCode 必装插件
Monorepo + pnpm workspace 实战
Vite vs Webpack 性能对比
常见排错

1. Vite 是什么

Vite（法语"快"的发音 /vit/）是下一代前端构建工具，由 Vue 作者尤雨溪团队开发。核心目标：让开发体验更快、更顺手。

1.1 核心特性

特性	说明
极速冷启动	开发模式不打包，按需 ESM 编译
毫秒级 HMR	修改文件只更新该模块，不重新加载页面
开箱即用 TS / JSX / CSS 预处理器	零配置支持
生产用 Rollup 打包	产物优化、Tree Shaking、代码分割
生态完整	Vue / React / Svelte / Solid / Preact 全支持
插件体系	兼容 Rollup 插件、自动兼容大多数 Webpack 插件

1.2 为什么快：传统 vs Vite

1
2
3
4
5
6
7


传统 Webpack 模式（dev）：
启动 ── 打包所有模块 ── 才能 serve

Vite 模式（dev）：
启动 ── 立即 serve ── 浏览器按需请求 ESM
 ↑
 浏览器原生 import 解析，服务器只编译被请求的文件

原理：现代浏览器都支持 <script type="module"> + 原生 ESM 导入。Vite 把"打包"这件事推迟到浏览器运行时——服务器只编译被请求的单个文件，完全跳过冷启动的全量打包。

2. 环境要求

工具	版本	备注
Node.js	20.19+ 或 22.12+	Vite 7 强制要求
pnpm（推荐）	9+	装包快、磁盘省
npm	10+	Node 自带
yarn	4+	Berry 系列

1
2


node -v # v20.19.0 或 v22.12.0+
pnpm -v # 9.x

不兼容旧 Node：Vite 7 不再支持 Node 18.x。

3. 创建 Vite 项目：5 种模板

3.1 命令行创建

1

pnpm create vite

交互式：

1
2
3
4
5


✔ Project name: … react-ts-demo1
✔ Select a framework: › React
✔ Select a variant: › TypeScript
✔ Use rolldown-vite (Experimental)?: no
✔ Install with pnpm and start now?: yes

跑完自动启动：

1
2
3
4
5


 VITE v7.2.7 ready in 339 ms

 ➜ Local: http://localhost:5173/
 ➜ Network: use --host to expose
 ➜ press h + enter to show help

3.2 直接指定模板

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# React + TS
pnpm create vite react-ts-demo --template react-ts

# Vue 3 + TS
pnpm create vite vue3-ts-demo --template vue-ts

# Svelte
pnpm create vite svelte-demo --template svelte-ts

# 原生 JS
pnpm create vite vanilla-demo --template vanilla

# 列出所有模板
pnpm create vite --help

3.3 Rolldown-Vite 实验性选项

Vite 7 实验性接入 Rolldown——基于 Rust 的下一代打包器，目标是替换 esbuild + Rollup，实现极致构建速度。

问：Use rolldown-vite (Experimental)?: no → 目前不建议生产用
实验性质，可能与某些插件不兼容
实际收益：5-10x 打包速度提升（仅生产模式）

4. 项目结构详解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


react-ts-demo1/
├── dist/ # 构建产物
├── node_modules/
├── public/ # 不参与构建的静态资源
│ └── vite.svg
├── src/
│ ├── assets/ # 静态资源（被 webpack/vite 处理）
│ │ └── react.svg
│ ├── components/ # 公共组件
│ ├── App.tsx # 根组件
│ ├── main.tsx # 入口
│ ├── App.css
│ ├── index.css # 全局样式入口
│ └── vite-env.d.ts # Vite 内置类型
├── .gitignore
├── eslint.config.js # ESLint 9 扁平配置
├── index.html # 入口 HTML
├── package.json
├── pnpm-lock.yaml # 必须提交
├── README.md
├── tsconfig.app.json # 应用代码 TS 配置
├── tsconfig.json # TS 根配置
├── tsconfig.node.json # Node 环境 TS 配置
└── vite.config.ts # Vite 配置

tsconfig 拆三份：Vite 模板默认把 TS 配置拆成 tsconfig.app.json（业务代码）和 tsconfig.node.json（vite.config.ts），用 references 关联。

5. Vite 核心配置文件

vite.config.ts：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
 plugins: [react()],

 resolve: {
 alias: {
 '@': path.resolve(__dirname, 'src')
 }
 },

 server: {
 port: 8080,
 host: '127.0.0.1',
 open: true,
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 rewrite: (p) => p.replace(/^\/api/, '')
 }
 }
 },

 build: {
 target: 'es2020',
 sourcemap: false,
 outDir: 'dist',
 rollupOptions: {
 output: {
 manualChunks: {
 react: ['react', 'react-dom'],
 router: ['react-router-dom'],
 ui: ['antd']
 }
 }
 }
 }
})

6. TypeScript 集成

Vite 自动支持 .ts / .tsx / .vue 文件——不需要 ts-loader / babel-loader。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
 readonly VITE_API_BASE: string
}

interface ImportMeta {
 readonly env: ImportMetaEnv
}

读环境变量：

1
2
3


console.log(import.meta.env.VITE_API_BASE)
console.log(import.meta.env.MODE) // 'development' | 'production'
console.log(import.meta.env.DEV) // boolean

7. 路径别名 @ 配置

7.1 vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

7.2 tsconfig.json（必须配，否则 TS 找不到）

1
2
3
4
5
6
7
8


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

之后就能 import Foo from '@/components/Foo'。

8. 反向代理与 HMR

8.1 代理后端 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


server: {
 proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 rewrite: (p) => p.replace(/^\/api/, '')
 },
 '/socket.io': {
 target: 'http://localhost:3000',
 ws: true, // 支持 WebSocket
 changeOrigin: true
 }
 }
}

8.2 HMR 配置

1
2
3
4
5
6
7


server: {
 hmr: {
 host: '127.0.0.1',
 port: 8080,
 overlay: true // 错误时全屏遮罩
 }
}

8.3 在 React 中接受 HMR

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
 <StrictMode>
 <App />
 </StrictMode>
)

Vite 自动通过 import.meta.hot 注入 HMR API，不需要额外配置——React Fast Refresh 自动接管。

9. 多环境变量 .env 管理

Vite 默认只有 development 和 production。要扩展：

1
2
3
4


.env # 所有环境都加载
.env.development # npm run dev 加载
.env.test # npm run build --mode test 加载
.env.production # npm run build --mode production 加载

9.1 .env.development

1
2


VITE_APP_TITLE = '开发环境'
VITE_API_BASE = '/api'

9.2 .env.production

1
2


VITE_APP_TITLE = '生产环境'
VITE_API_BASE = 'https://api.example.com'

9.3 package.json scripts

1
2
3
4
5
6
7
8
9


{
 "scripts": {
 "dev": "vite",
 "build": "tsc -b && vite build",
 "build:test": "tsc --noEmit && vite build --mode test",
 "build:prod": "tsc --noEmit && vite build --mode production",
 "preview": "vite preview"
 }
}

必须 VITE_ 开头才能被 import.meta.env 识别——防止意外暴露服务端配置。

10. 生产构建：Rollup 与 Rolldown 实验

10.1 默认 Rollup 打包

1
2
3
4
5
6
7


pnpm build
# vite v7.2.7 building for production...
# ✓ 1234 modules transformed.
# dist/index.html 0.45 kB
# dist/assets/index-abc123.js 312.50 kB │ gzip: 102.40 kB
# dist/assets/index-def456.css 45.20 kB │ gzip: 12.10 kB
# ✓ built in 5.42s

10.2 关键选项

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


build: {
 target: 'es2020', // 目标浏览器
 outDir: 'dist',
 sourcemap: false, // 生产不开
 minify: 'esbuild', // 默认 esbuild，可换 terser
 cssCodeSplit: true, // CSS 拆分
 chunkSizeWarningLimit: 1500, // 块大小警告阈值
 rollupOptions: {
 output: {
 manualChunks: { /* 拆包 */ },
 entryFileNames: 'assets/[name].[hash].js',
 chunkFileNames: 'assets/[name].[hash].js',
 assetFileNames: 'assets/[name].[hash][extname]'
 }
 }
}

10.3 启用 Rolldown 实验

升级到 Vite 7 + 安装 Rolldown Vite：

1

pnpm add rolldown-vite -D

目前不建议生产用——某些插件还不兼容。

11. 代码风格：ESLint + Prettier

11.1 ESLint 9 扁平配置（vite create 自动生成）

eslint.config.js：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
 { ignores: ['dist'] },
 {
 extends: [js.configs.recommended, ...tseslint.configs.recommended],
 files: ['**/*.{ts,tsx}'],
 languageOptions: {
 ecmaVersion: 2020,
 globals: globals.browser
 },
 plugins: {
 'react-hooks': reactHooks,
 'react-refresh': reactRefresh
 },
 rules: {
 ...reactHooks.configs.recommended.rules,
 'react-refresh/only-export-components': 'warn'
 }
 }
)

11.2 Prettier

1

pnpm add -D prettier eslint-config-prettier

.prettierrc.json：

1
2
3
4
5
6
7
8


{
 "printWidth": 100,
 "tabWidth": 2,
 "semi": false,
 "singleQuote": true,
 "trailingComma": "all",
 "endOfLine": "auto"
}

12. VSCode 必装插件

插件	用途
ESLint	9+ 扁平配置支持
Prettier	自动格式化
TypeScript Vue Plugin (Volar)	Vue 3 + TS
ES7+ React/Redux snippets	React 代码片段
Tailwind CSS IntelliSense	Tailwind 类名补全
Path Intellisense	路径补全
Stylelint	CSS/Less/SCSS 检查

13. Monorepo + pnpm workspace 实战

13.1 pnpm-workspace.yaml

1
2
3


packages:
 - 'apps/*'
 - 'packages/*'

13.2 apps/web/package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
 "name": "@myorg/web",
 "private": true,
 "scripts": {
 "dev": "vite",
 "build": "tsc -b && vite build"
 },
 "dependencies": {
 "@myorg/utils": "workspace:*",
 "@myorg/ui": "workspace:*"
 }
}

13.3 packages/utils/package.json

1
2
3
4
5
6
7
8
9


{
 "name": "@myorg/utils",
 "version": "1.0.0",
 "type": "module",
 "main": "./src/index.ts",
 "exports": {
 ".": "./src/index.ts"
 }
}

13.4 跨包引用

1
2
3


// apps/web/src/App.tsx
import { formatDate } from '@myorg/utils'
import { Button } from '@myorg/ui'

1
2
3


pnpm install # 装所有工作区依赖 + 链接
pnpm -F @myorg/web dev # 只跑 web 包的 dev
pnpm -r build # 所有包 build

14. Vite vs Webpack 性能对比

维度	Vite 7	Webpack 5
冷启动	< 1s（按需编译）	10-30s（全量打包）
HMR 速度	< 100ms	1-5s
生产构建	Rollup，5-15s	30s-2min
配置复杂度	零配置 + 少量 plugins	大量 loader + plugin
生态兼容	Rollup 插件 + 大量 Vite 插件	Webpack 生态（成熟）
SSR 支持	强（Vite SSR API）	中（webpack-ssr-plugin）
学习曲线	平缓	陡峭

2025 选型：

新项目：直接 Vite（启动快、配置简单）

老 Webpack 项目：不必强迁——Webpack 5 + 持久化缓存已经够快

大厂 monorepo：评估 Rspack（Rust 编写、Webpack 兼容 API）—— 字节跳动 + Microsoft 在用

15. 常见排错

15.1 TS2307: Cannot find module ‘./App.vue’

解法：建 src/vite-env.d.ts（Vite 模板已自动生成）：

1
2
3
4
5
6


/// <reference types="vite/client" />
declare module '*.vue' {
 import type { DefineComponent } from 'vue'
 const component: DefineComponent<{}, {}, any>
 export default component
}

15.2 import path 找不到

检查清单：

vite.config.ts 配了 alias
tsconfig.json 配了 paths（两端必须都配）
重启 VSCode（让 TS 服务重读 tsconfig）

15.3 代理 404

1
2
3
4
5
6
7


proxy: {
 '/api': {
 target: 'http://localhost:3000',
 changeOrigin: true,
 // rewrite: (p) => p.replace(/^\/api/, '') // ⚠️ 注释掉，看后端路由
 }
}

先看 dev server 真正发到哪——加 bypass: (req) => req.url 在 proxy 里打印。

15.4 端口被占用

1
2
3
4
5
6
7


# Windows
netstat -ano | findstr :8080
taskkill /PID <pid> /F

# macOS / Linux
lsof -i :8080
kill -9 <pid>

或改 Vite 配置：

1
2
3
4


server: {
 port: 8081, // 换个端口
 strictPort: false // 端口被占时自动换
}

小结

Vite 7 是 2025 年前端构建工具的"事实标准"：

极快冷启动（< 1s）—— 跳过 dev 模式的全量打包
TypeScript / JSX / CSS 预处理器零配置
@ 路径别名两行配置
多环境变量 .env.development / .env.production
生产 Rollup 打包，可选 Rolldown 实验（更快）
monorepo 配合 pnpm workspace 一行 pnpm -r build 跑所有包

下一步：学 Vite 插件开发（写自己的 plugin）、Vite SSR（配合 React 19 RSC / Vue 3 Nuxt）、微前端（Vite + Module Federation）。

参考资料

UniApp 跨端开发：Vue 语法一次编写，10+ 端发布

Sat, 15 Jul 2023 00:00:00 +0800

为什么写这篇：UniApp 是国内"Vue 写多端"最成熟的方案——2023 年统计有 600 万+ 开发者。一个团队写一套 Vue 代码，就能发到微信小程序、抖音小程序、H5、iOS/Android——节省 60%+ 人力。本文从环境到实战完整走通。

适用读者：要快速开发多端小程序的前端；从 Vue 转 UniApp 的工程师；想了解跨端框架对比的负责人。

前置知识：Vue 2 基础；会用 Vue CLI。

1. UniApp 是什么

DCloud 推出的"一次开发，多端发布"框架。Vue 语法 + 小程序能力 + H5/Web 能力——一套代码同时发布到：

端	支持度
iOS / Android（App）	✅ 真机原生
H5	✅ Web
微信小程序	✅ 完整支持
支付宝小程序	✅
百度小程序	✅
抖音小程序	✅
QQ 小程序	✅
快应用	✅
钉钉小程序	✅
飞书小程序	✅
各厂商快应用	✅ 10+ 个

Why 选择 UniApp：

Vue 语法——学习成本低，国内前端主力栈

生态完整——uni-ui / uView UI / uni-ui-plus 等组件库丰富

IDE 配套——HBuilderX（官方 IDE）开箱即用，无需配 Webpack/Vite

社区活跃——DCloud 论坛 + 大量 GitHub 仓库

2. 环境准备

2.1 推荐方式：HBuilderX（官方 IDE）

下载 HBuilderX——免费、可视化、内置模拟器。

优点：零配置、模板多、可视化运行、发布缺点：基于 VSCode 内核改的，部分插件兼容性一般

2.2 命令行方式（适合习惯 Webpack/Vite 的工程师）

1
2
3
4


# 全局装 vue-cli
npm install -g @vue/cli

vue -V # @vue/cli 5.0.x

版本要求（推荐）：

工具	版本
Node	14.21.3（官方推荐）
npm	6.14.18
yarn	1.22.19
vue-cli	5.0.8

Node 兼容性：UniApp 早期版本不兼容 Node 18+。用 nvm 切到 Node 14/16 是最稳的。

3. 创建项目

3.1 命令行（vue-cli）

1

vue create -p dcloudio/uni-preset-vue my-project

交互式：

1
2


? 请选择 uni-app 模板: hello uni-app # 官方默认模板
? 是否使用 TypeScript: No # 也可选 Yes

镜像加速：vue create 拉模板可能慢——HBuilderX 内置模板不走这一步。

3.2 HBuilderX

文件 → 新建 → 项目 → uni-app → 选模板（默认 / Hello uni-app / 登录模板 / 地图模板 / 蓝牙模板…）。

3.3 运行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 浏览器（H5）
npm run dev:h5

# 微信小程序（需配微信开发者工具路径）
npm run dev:mp-weixin

# 支付宝小程序
npm run dev:mp-alipay

# App（需配模拟器或真机）
npm run dev:app

4. 目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


my-project/
├── pages/ # 页面文件（自动注册路由）
│ ├── index/
│ │ └── index.vue
│ ├── about/
│ │ └── about.vue
│ └── list/
│ └── list.vue
├── static/ # 静态资源（不会被编译）
│ ├── images/
│ └── icons/
├── components/ # 自定义公共组件
│ └── my-card/
│ └── my-card.vue
├── common/ # 公共 JS / CSS
│ ├── api.js
│ └── uni.css
├── store/ # Vuex
│ └── index.js
├── utils/ # 工具函数
│ └── request.js
├── App.vue # 应用配置（生命周期、全局样式）
├── main.js # 入口 JS
├── manifest.json # 应用配置（appid、版本、权限）
├── pages.json # 页面路由 + tabBar + navigationBar
├── uni.scss # 全局 SCSS 变量
└── package.json

pages.json 是 UniApp 的"路由 + 导航 + tabBar"配置文件——比 Vue Router 简单。

5. 条件编译：跨端兼容的关键

UniApp 的杀手锏——用注释语法实现编译时的跨端代码分叉。

5.1 模板条件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- #ifdef H5 -->
<view>这段只在 H5 显示</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view>只在微信小程序显示</view>
<!-- #endif -->

<!-- #ifdef APP-PLUS -->
<view>只在 App 端显示</view>
<!-- #endif -->

5.2 JS 条件

1
2
3
4
5
6
7


// #ifdef H5
console.log('H5 only')
// #endif

// #ifndef MP-WEIXIN
console.log('非微信端都执行')
// #endif

5.3 CSS 条件

1
2
3
4
5
6
7


/* #ifdef H5 */
.header { padding-top: 44px; } /* H5 顶部避开浏览器栏 */
/* #endif */

/* #ifdef MP-WEIXIN */
.header { padding-top: 0; }
/* #endif */

5.4 常见条件编译关键字

关键字	含义
`H5`	H5 端
`MP-WEIXIN`	微信小程序
`MP-ALIPAY`	支付宝小程序
`MP-BAIDU`	百度小程序
`MP-TOUTIAO`	抖音/头条小程序
`MP-QQ`	QQ 小程序
`MP`	所有小程序
`APP-PLUS`	App 端（iOS / Android）
`APP-PLUS-NVUE`	App nvue 页面（原生渲染）
`APP-NVUE`	同上
`APP-VUE`	App 端 vue 页面

5.5 实战：H5 显示分享按钮 / 小程序隐藏

1
2
3
4
5
6
7
8
9


<view class="actions">
 <!-- #ifdef H5 -->
 <button @click="shareToWeibo">分享到微博</button>
 <!-- #endif -->

 <!-- #ifdef MP-WEIXIN -->
 <button open-type="share">微信分享</button>
 <!-- #endif -->
</view>

6. UniApp 生命周期

6.1 应用生命周期（App.vue）

钩子	说明
`onLaunch`	应用初始化（全局只触发一次）
`onShow`	应用启动或从后台进入前台
`onHide`	应用从前台进入后台
`onError`	报错时触发

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// App.vue
export default {
 onLaunch() {
 console.log('App Launch')
 },
 onShow() {
 console.log('App Show')
 },
 onHide() {
 console.log('App Hide')
 }
}

6.2 页面生命周期

钩子	说明
`onLoad`	页面加载（接收 options 参数）
`onShow`	页面显示
`onReady`	页面初次渲染完成
`onHide`	页面隐藏
`onUnload`	页面卸载
`onPullDownRefresh`	用户下拉刷新
`onReachBottom`	页面上拉触底
`onShareAppMessage`	微信分享

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// pages/index/index.vue
export default {
 data() {
 return { count: 0 }
 },
 onLoad(options) {
 console.log('页面加载，参数：', options)
 },
 onShow() {
 console.log('页面显示')
 },
 onPullDownRefresh() {
 this.refresh()
 },
 methods: {
 refresh() {
 // 重新拉数据
 uni.stopPullDownRefresh()
 }
 }
}

vs Vue 生命周期：UniApp 用 onLoad / onShow 替代 Vue 的 mounted——因为 App 切后台再回来时，页面不一定重新加载。

7. 页面与路由

7.1 pages.json 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


{
 "pages": [
 {
 "path": "pages/index/index",
 "style": {
 "navigationBarTitleText": "首页",
 "enablePullDownRefresh": true
 }
 },
 {
 "path": "pages/about/about",
 "style": {
 "navigationBarTitleText": "关于"
 }
 }
 ],
 "globalStyle": {
 "navigationBarTextStyle": "white",
 "navigationBarTitleText": "我的 App",
 "navigationBarBackgroundColor": "#42b883",
 "backgroundColor": "#f8f8f8"
 },
 "tabBar": {
 "color": "#7A7E83",
 "selectedColor": "#42b883",
 "backgroundColor": "#FFFFFF",
 "list": [
 {
 "pagePath": "pages/index/index",
 "text": "首页",
 "iconPath": "static/icons/home.png",
 "selectedIconPath": "static/icons/home-active.png"
 },
 {
 "pagePath": "pages/about/about",
 "text": "关于",
 "iconPath": "static/icons/user.png",
 "selectedIconPath": "static/icons/user-active.png"
 }
 ]
 }
}

7.2 路由 API

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 跳转到新页面（保留当前页面）
uni.navigateTo({ url: '/pages/detail/detail?id=123' })

// 重定向（关闭当前页面，跳到新页面）
uni.redirectTo({ url: '/pages/login/login' })

// 切换 tabBar 页面
uni.switchTab({ url: '/pages/index/index' })

// 返回上一页（delta：返回层数）
uni.navigateBack({ delta: 1 })

// 关闭所有页面，打开到应用内的某个页面
uni.reLaunch({ url: '/pages/index/index' })

7.3 接收参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 跳转
uni.navigateTo({ url: '/pages/detail/detail?id=123&name=test' })

// 接收（在 onLoad 钩子）
export default {
 onLoad(options) {
 console.log(options.id) // '123'
 console.log(options.name) // 'test'
 }
}

8. 常用 API：网络 / 存储 / 位置

8.1 网络请求

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// 推荐封装
function request(url, method, data) {
 return new Promise((resolve, reject) => {
 uni.request({
 url: 'https://api.example.com' + url,
 method,
 data,
 header: {
 'Authorization': 'Bearer ' + uni.getStorageSync('token')
 },
 success: (res) => {
 if (res.statusCode === 200) resolve(res.data)
 else reject(res)
 },
 fail: (err) => reject(err)
 })
 })
}

// 用法
const data = await request('/user/profile', 'GET')

8.2 数据存储

1
2
3
4
5
6
7
8


// 同步
uni.setStorageSync('key', 'value')
uni.getStorageSync('key') // 'value'
uni.removeStorageSync('key')

// 异步
await uni.setStorage({ key: 'k', data: 'v' })
const { data } = await uni.getStorage({ key: 'k' })

H5 端底层是 localStorage——大小限制 5-10MB

8.3 位置

1
2
3
4
5
6
7


uni.getLocation({
 type: 'gcj02',
 success: (res) => {
 console.log('纬度', res.latitude)
 console.log('经度', res.longitude)
 }
})

8.4 系统信息

1
2
3
4


const info = uni.getSystemInfoSync()
console.log(info.platform) // 'ios' | 'android' | 'devtools'
console.log(info.screenWidth)
console.log(info.statusBarHeight) // 状态栏高度

8.5 弹窗

1
2
3
4


uni.showToast({ title: '保存成功', icon: 'success' })
uni.showModal({ title: '提示', content: '确定删除？', success: (r) => {
 if (r.confirm) console.log('用户点了确定')
}})

9. 跨端注意事项与坑

9.1 v-if 替代 v-show

1
2


<!-- 小程序不支持 v-show（性能差），用 v-if -->
<view v-if="show">内容</view>

9.2 标签必须闭合

1
2
3
4
5


<!-- ❌ 自闭合 -->
<input ...>

<!-- ✅ 自闭合 -->
<input ... />

9.3 没有 `<img>` 标签

1
2
3
4
5


<!-- ❌ 用 img -->
<img src="..." />

<!-- ✅ 用 image -->
<image src="..." />

9.4 没有 `<a>` 标签

1
2
3
4
5


<!-- ❌ 用 a 标签跳转 -->
<a href="/about">关于</a>

<!-- ✅ 用 navigator 组件或 JS API -->
<navigator url="/pages/about/about">关于</navigator>

9.5 没有 `<div>`，用 `<view>`；没有 `<span>`，用 `<text>`

1
2
3


<view class="container">
 <text class="title">{{ msg }}</text>
</view>

9.6 CSS 单位用 rpx（响应式像素）

1
2
3
4
5


.container {
 width: 750rpx; /* iPhone 6 下等于 375px，全屏 */
 padding: 20rpx;
 font-size: 28rpx;
}

rpx = 屏幕宽度的 1/750——所有设备按比例缩放。

9.7 小程序无法直接操作 DOM

1
2
3
4
5


// ❌ 错误
document.querySelector('.foo').classList.add('active')

// ✅ 正确：通过 Vue 响应式
this.isActive = true

9.8 微信小程序的登录流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 1. 调 wx.login() 拿 code
uni.login({
 provider: 'weixin',
 success: (loginRes) => {
 const code = loginRes.code
 // 2. 把 code 发到自家后端，换 session_key + openid
 uni.request({
 url: 'https://api.example.com/wechat/login',
 method: 'POST',
 data: { code },
 success: (res) => {
 uni.setStorageSync('token', res.data.token)
 }
 })
 }
})

10. UniApp vs Taro vs React Native vs Flutter

维度	UniApp	Taro 3	React Native	Flutter
语法	Vue 2/3	React	React	Dart
渲染	WebView / 小程序	WebView / 小程序 / RN	Native	自绘引擎
性能	中（WebView 限制）	中	接近原生	最优
多端覆盖	10+ 端	8 端	仅 iOS/Android	仅 iOS/Android
学习成本	低（Vue）	中（React + Taro API）	中	高（Dart）
生态	国内最丰富	中（京东系）	Facebook 系	Google 系
包体积	1-3MB	1-3MB	5-10MB	5-15MB
TypeScript	支持	支持	强	强
大厂使用	阿里、京东、字节、腾讯	京东、网易、美团	Facebook、Airbnb	Google、阿里

选型建议：

国内小程序 + H5 + App 全部都要 → UniApp（首选）

团队熟悉 React + 多端 → Taro 3

追求 iOS/Android 性能 + 团队有原生经验 → React Native

极致性能 + 复杂动画 + 跨端 UI 一致 → Flutter

只需要 H5 / Web → 直接 Vue/React + Vite，不要用跨端框架

小结

UniApp 入门核心：

环境：HBuilderX（IDE）或 vue-cli（命令行）
创建：vue create -p dcloudio/uni-preset-vue 选 hello uni-app 模板
路由：pages.json（不是 Vue Router）
跨端：条件编译  是关键
API：全部走 uni.xxx 命名空间（uni.request / uni.navigateTo / uni.getLocation）
坑：无 DOM、无 a/div/img、必须用 view/text/image、CSS 用 rpx

下一步：学 uni-ui 组件库（官方）、uView UI（社区最流行）、uCharts（图表）、即时通讯（融云 / 环信 UniApp SDK）、App 上架（iOS App Store + 安卓各大市场）。

参考资料

Vue 2 入门：vue-cli 脚手架与项目初始化完整路径

Mon, 15 Oct 2018 00:00:00 +0800

为什么写这篇：2018 年是 Vue 2 的成熟期，vue-cli 3.0 正式发布（基于 Webpack 4 + 零配置）。Element UI 已经成为中后台标配，Vuex + Vue Router 也走过了"磨合期"。即使 Vue 3 已发布，理解 Vue 2 仍是企业级项目维护的"基本功"——大量老项目还在跑 Vue 2。

适用读者：完全没接触过 Vue 的同学；从 React / Angular 转过来的前端；想系统整理 Vue 2 知识的中级工程师。

前置知识：HTML / CSS / JavaScript 基础。

1. 环境准备：Node.js 与 vue-cli

1.1 Node.js

从 nodejs.org 下载 LTS 版本（写作时是 22.x，回看 2018 是 10.x）。安装后：

1
2


node -v
npm -v

npm 升级到最新（Node 自带的 npm 不一定最新）：
1
npm install -g npm

1.2 装 yarn（可选，但推荐）

1
2


npm install -g yarn
yarn -v

1.3 装 vue-cli

1
2
3
4
5


npm install -g @vue/cli
# 或
yarn global add @vue/cli

vue -V # @vue/cli 5.0.x

环境变量（Windows）：把 C:\Users\<user>\AppData\Local\Yarn\bin 加到 PATH。

1.4 升级 vue-cli

1
2
3


npm update -g @vue/cli
# 或
yarn global upgrade --latest @vue/cli

1.5 装 native 编译工具

一些 npm 包（node-sass、node-gyp）需要 C++ 编译器。Windows 上装 windows-build-tools：

1
2


npm install -g node-gyp
npm install --global --production windows-build-tools

清理缓存：

1

npm cache clean --force

2. vue create：手动选择项目特性

1

vue create vue-pro

vue create 会进入交互式选择：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? No
? Use Babel alongside TypeScript? Yes
? Use history mode for router? (Requires proper server setup for index fallback) Yes
? Pick a CSS pre-processor: Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

各项含义：

特性	用途	推荐
Babel	把 ES2015+ 转 ES5，老浏览器兼容	✅ 必选
TypeScript	JS 超集，类型检查	✅ 大型项目必选
PWA	渐进式 Web 应用（Service Worker、离线）	⭕ 按需
Router	vue-router 路由	✅ SPA 必选
Vuex	状态管理	✅ 中大型项目必选
CSS Pre-processors	SCSS / Less / Stylus	⭕ 按团队
Linter / Formatter	ESLint 代码规范	✅ 必选
Unit Testing	单元测试（Jest / Mocha）	⭕ 大型项目
E2E Testing	端到端测试（Cypress / Nightwatch）	⭕ 大型项目

跑完后 cd 进去：

1
2


cd vue-pro
yarn serve # 或 npm run serve

可视化配置：vue ui 打开 http://localhost:8000，可以用 GUI 装插件、跑构建。

3. 项目目录结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


vue-pro/
├── public/ # 不参与 webpack 构建的静态资源
│ ├── favicon.ico
│ └── index.html # HTML 模板
├── src/
│ ├── assets/ # 会被 webpack 处理的静态资源
│ ├── components/ # 公共组件
│ │ └── HelloWorld.vue
│ ├── views/ # 路由页面组件
│ ├── router/ # vue-router 配置
│ │ └── index.ts
│ ├── store/ # Vuex 状态
│ │ └── index.ts
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── shims-vue.d.ts # 让 TS 识别 .vue 文件
├── tests/ # 单元测试
├── .browserslistrc # 浏览器兼容目标
├── .eslintrc.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── tsconfig.json
└── vue.config.js # 可选，手写时配置 Webpack

4. 装 Element UI / less / ESLint

4.1 Element UI（Vue 2 时代中后台标配）

1
2


vue add element
# 自动选按需引入、主题色

4.2 less / less-loader

1
2
3


yarn add less less-loader --dev
# 或
npm install less less-loader --save-dev

使用：

1
2
3
4
5


<style scoped lang="less">
.read-the-docs {
 color: #888;
}
</style>

4.3 ESLint

1
2
3
4
5
6


yarn add --dev eslint
# 或
npm install --save-dev eslint

# 初始化
eslint --init

卸载：

1

yarn remove eslint

5. Vue 核心：声明式渲染

1
2
3


<div id="app">
 {{ message }}
</div>

1
2
3
4
5
6


var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

核心思想：用 {{ }}（Mustache 语法）把 data 里的变量渲染到 HTML。data 一变，DOM 自动更新——这是 Vue（和 React、Angular）“响应式"的本质。

6. 指令速查表

指令	简写	作用	示例
`v-bind:href`	`:href`	绑定 HTML 属性	`<a :href="url">`
`v-if`		条件渲染（销毁/重建 DOM）	`<p v-if="ok">YES</p>`
`v-else-if` / `v-else`		配合 `v-if`
`v-show`		条件渲染（仅切换 `display`）	`<p v-show="ok">`
`v-for`		列表循环	`<li v-for="(item, i) in arr" :key="i">`
`v-on:click`	`@click`	事件绑定	`<button @click="fn">`
`v-model`		表单双向绑定	`<input v-model="name">`
`v-once`		只渲染一次	`<span v-once>{{ msg }}</span>`
`v-html`		输出真正的 HTML	`<div v-html="rawHtml">`
`v-slot`	`#`	插槽（具名插槽）	`<Comp #header>`

v-if vs v-show：

v-if 真假切换时会销毁/重建 DOM 节点——切换开销大

v-show 仅切 display: none —— 初次渲染开销大，切换开销小

频繁切换用 v-show，条件很少变用 v-if

v-for 必带 :key：
1
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
key 帮助 Vue 高效复用 DOM。永远不要用 index 当 key（除非列表完全静态）。

6.1 模板表达式

1
2
3
4
5
6
7
8


{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

<!-- ❌ 不行：不能写语句 -->
{{ var a = 1 }}
{{ if (ok) { return message } }}

7. 自定义组件

1
2
3
4
5
6


// 全局注册
Vue.component('todo-item', {
 template: '<li>这是个待办项</li>'
})

var app = new Vue({ /* ... */ })

1

<todo-item></todo-item>

现代写法：用 .vue 单文件组件（包含 template / script / style 三段），更清晰。

8. 生命周期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


beforeCreate ─┐
 │ 初始化 events & lifecycle
created ─┤ 注入（provide / inject）
 │
beforeMount ─┤ 模板编译
mounted ─┘ DOM 已挂载 ✅
 │
beforeUpdate ─┐ 数据变化 → 重新渲染前
updated ─┤ 重新渲染后
 │
activated ─┐ <keep-alive> 专属
deactivated ─┘
 │
beforeDestroy ─┐ 组件销毁前
destroyed ─┘ 组件销毁后

最常用的两个：

created：组件创建完，data 已初始化，DOM 还没渲染。常用于发请求拿初始数据
mounted：DOM 已挂载完成。可以操作 DOM、初始化第三方库

9. 计算属性 vs 方法 vs 侦听器

9.1 计算属性（computed）

1
2
3
4
5
6
7
8
9


var vm = new Vue({
 el: '#example',
 data: { message: 'Hello' },
 computed: {
 reversedMessage: function () {
 return this.message.split('').reverse().join('')
 }
 }
})

特性：基于依赖缓存——message 不变就返回上次的计算结果，多次访问不重复算。

9.2 方法（methods）

1
2
3
4
5


methods: {
 reversedMessage: function () {
 return this.message.split('').reverse().join('')
 }
}

特性：每次调用都重算。不缓存。

9.3 侦听器（watch）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


var vm = new Vue({
 el: '#demo',
 data: {
 firstName: 'Foo',
 lastName: 'Bar',
 fullName: 'Foo Bar'
 },
 watch: {
 firstName: function (val) {
 this.fullName = val + ' ' + this.lastName
 },
 lastName: function (val) {
 this.fullName = this.firstName + ' ' + val
 }
 }
})

特性：监听某个 data 变化后触发副作用（如发请求）。用 computed 能搞定的别用 watch。

9.4 选型原则

场景	选
模板里需要派生数据	`computed`
事件回调 / 交互	`methods`
data 变化要发请求 / 调 API	`watch`

10. 组件模块系统

1
2
3
4
5
6
7


import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
 components: { ComponentA, ComponentC },
 // ...
}

现代项目用 import { ref, computed } from 'vue'（Composition API，Vue 3）或 import { mapState, mapGetters } from 'vuex'（Vuex 4）组织逻辑。

11. Vue.config.js 配置

从 Vue CLI 3.0 开始，Webpack 的配置文件从 webpack.config.js 变成了 vue.config.js，需要手工创建。

最小配置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// vue.config.js
module.exports = {
 publicPath: './', // 部署到子目录时配
 outputDir: 'dist',
 productionSourceMap: false,
 devServer: {
 port: 8080,
 open: true
 }
}

完整配置（参考 Vue CLI 文档）涉及几十项，本文不展开。

小结

Vue 2 入门核心要点：

环境：Node LTS + @vue/cli 全局
项目初始化：vue create + 手动选 Babel/TS/Router/Vuex/Linter
核心概念：声明式渲染 + 指令 + 组件
数据流：data → computed（派生）→ methods（动作）→ watch（副作用）
生命周期：created（发请求）、mounted（操作 DOM）
配置：vue.config.js（Webpack 5 升级后建议用 Vite 6+ 替代）

下一步：学 Vue 3 的 Composition API、<script setup>、Pinia（替代 Vuex）、Vite 7。Vue 2 已于 2023-12-31 EOL，新项目都应直接上 Vue 3。

参考资料

高性能前端：HTTP 缓存 / CDN / gzip 与 Vue 首屏优化实战

Sat, 15 Apr 2017 00:00:00 +0800

为什么写这篇：2017 年 HTTP/2 全面铺开、vue-cli@3.4 默认开了很多性能优化（splitChunks、tree-shaking、terser）。本文把"代码 + 服务器 + 框架"三层优化串起来——一个真实项目把首屏从 10s 压到 2s。

适用读者：Vue 2/3 项目的性能优化负责人；想系统理解 HTTP 缓存 / CDN / gzip 的初中级前端。

前置知识：会用 vue-cli 启项目；知道 Nginx 配置文件长什么样。

前端性能优化的三层模型
代码层面：CSS 位置与请求数
代码层面：减少 HTTP 请求
代码层面：CDN 与外部资源
代码层面：Gzip 压缩
服务器层面：Nginx gzip 配置
服务器层面：HTTP/2 多路复用
服务器层面：缓存策略
Vue 实战：compression-webpack-plugin + externals + sourceMap
首屏时间从 10s 到 2s 的真实案例

1. 前端性能优化的三层模型

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


┌─────────────────────────────────────┐
│ Layer 1：代码层面（HTML/CSS/JS） │
│ - 样式表放 head、脚本放 body 底部 │
│ - 雪碧图 / 内联小图 / 合并脚本 │
│ - 使用外部 JS/CSS（可缓存） │
│ - 使用 CDN 引入公共库 │
└─────────────────────────────────────┘
 ↓
┌─────────────────────────────────────┐
│ Layer 2：服务器层面（Nginx） │
│ - 开启 gzip 压缩 │
│ - 开启 HTTP/2（需 HTTPS） │
│ - 强缓存（Expires / Cache-Control）│
│ - 协商缓存（ETag / Last-Modified）│
└─────────────────────────────────────┘
 ↓
┌─────────────────────────────────────┐
│ Layer 3：Vue 专项（vue-cli 3+） │
│ - 拆 vendor（splitChunks） │
│ - externals 走 CDN │
│ - productionSourceMap: false │
│ - compression-webpack-plugin 预 gzip│
└─────────────────────────────────────┘

Why 三层都要做：单做某一层效果有限。代码层减体积（KB→KB）、服务器层减传输（KB→10%×KB）、框架层减请求数（多个 chunk 复用连接）。

2. 代码层面：CSS 位置与请求数

2.1 样式表放 head

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title></title>
 <!-- ✅ 把 CSS 放 head，避免 FOUC（无样式内容闪烁） -->
 <link rel="stylesheet" href="example.css">
</head>
<body>
</body>
</html>

Why：浏览器渲染流水线是"解析 HTML → 遇到 CSS 阻塞渲染"。把 CSS 放最前面，能让浏览器一拿到 CSS 就开始构建 CSSOM，尽早完成首次绘制。

2.2 脚本放 body 底部

1
2
3
4
5
6


<body>
 <!-- 页面内容 -->

 <!-- ✅ 脚本放 body 底部，不阻塞页面渲染和图片下载 -->
 <script src="example.js"></script>
</body>

Why：<script> 标签默认阻塞——浏览器遇到 <script> 会停下后续的 HTML 解析，去下载并执行脚本。把脚本放底部（或加 defer / async）能避免这个阻塞。

2.3 使用外部 JS/CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!-- ✅ 推荐：外部文件，可被浏览器缓存 -->
<link rel="stylesheet" href="example.css">
<script src="example.js"></script>

<!-- ❌ 不推荐：内联到 HTML 里，每次都重新下载 -->
<style>
 /* code */
</style>
<script>
 /* code */
</script>

例外：极小的关键 CSS（如首屏字体样式）可内联——critical CSS 提取是另一项优化技术。

3. 代码层面：减少 HTTP 请求

Why 重要：HTTP/1.1 时代浏览器对同一域名的并发请求数有限制（Chrome 6 个）。每个请求都有 TCP 握手、TLS 握手、HTTP 头开销。请求越少越好。

3.1 雪碧图（CSS Sprites）

把多个小图标合到一张 PNG，用 background-position 定位：

1
2
3


.icon-home { background: url(sprite.png) 0 0; }
.icon-user { background: url(sprite.png) -30px 0; }
.icon-cart { background: url(sprite.png) -60px 0; }

现代替代：SVG sprite / iconfont（Iconfont.cn / iconify）。SVG 可缩放、可改色、HTTP 请求少。

3.2 内联小图（base64）

1

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/..." />

适用：小于 10KB 的图片（icon、二维码、小 logo） 不适用：大图（base64 比原图大 33%）

3.3 合并脚本与样式

1
2
3
4
5
6
7
8
9


拆得太细：
- /js/jquery.js
- /js/bootstrap.js
- /js/app.js
- /js/utils.js

合并后：
- /js/vendors.min.js
- /js/app.min.js

Webpack 自动化：mode: production 时 optimization.concatenateModules 自动合并。

4. 代码层面：CDN 与外部资源

4.1 为什么要用 CDN

CDN（Content Delivery Network）——把静态资源分发到全球各地的边缘服务器。用户访问时从最近的边缘节点拉资源，降低 RTT（往返时延）。

1
2
3


<!-- 从 CDN 引入 Vue / React -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

4.2 公共 CDN 服务

服务	特点
jsDelivr	全球 750+ 节点，自动 gzip/brotli，支持 npm/GitHub
unpkg	npm 包直链，简单
BootCDN	国内公司维护，国内访问快
CDNJS	Cloudflare 维护

4.3 HTTP/2 优势

多路复用：一个 TCP 连接并行多个请求，告别"6 个并发限制"
头部压缩：HPACK 算法把重复 header 压缩 80%+
服务器推送：服务器主动把后续资源推给客户端（已弃用）

前置条件：必须配 HTTPS——HTTP/2 规范要求加密。

5. 代码层面：Gzip 压缩

5.1 为什么 gzip 能省 50%-70%

1
2


原始 JS： 300 KB
gzip 后： 90 KB （节省 70%）

原理：gzip 用 LZ77 + Huffman 编码，把重复的字符串（如变量名、关键字、空白）替换为指针。文本类资源（JS/CSS/HTML）压缩比 60-80%，图片/视频已压缩过再 gzip 收益小（不到 5%）。

5.2 浏览器支持

1

Accept-Encoding: gzip, deflate, br

gzip：所有浏览器支持
br（Brotli）：Chrome / Firefox / Safari，压缩比比 gzip 高 15-20%
deflate：兼容老 IE，已基本被 gzip 替代

5.3 在 Node.js 中间件启用

1
2
3


// Express
const compression = require('compression')
app.use(compression())

6. 服务器层面：Nginx gzip 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# 开启 gzip
gzip on;
gzip_static on; # 优先用预压缩的 .gz 文件
gzip_min_length 1k; # 大于 1K 才压缩
gzip_buffers 4 16k;
gzip_http_version 1.1; # 1.1 起步才支持
gzip_comp_level 2; # 1-9，越高越费 CPU
gzip_types
 text/plain
 application/javascript
 application/x-javascript
 text/javascript
 text/css
 application/xml
 application/xml+rss;
gzip_vary on; # 配合 Vary 头，CDN 能分别缓存 gzip / br
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]\."; # IE 6 及以下不支持

7. 服务器层面：HTTP/2 多路复用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 启用 HTTP/2（必须先配 HTTPS）
server {
 listen 443 ssl http2;
 server_name example.com;

 ssl_certificate /path/to/fullchain.pem;
 ssl_certificate_key /path/to/private.key;

 # 其余配置...
}

What “多路复用” 感受：HTTP/1.1 时代，加载 10 个 JS 文件要排队等 6 个并发槽（剩余 4 个等前 6 个完）；HTTP/2 时代，10 个 JS 文件可以同时下载——首屏时间可能从 3s 降到 1.5s。

8. 服务器层面：缓存策略

8.1 强缓存：Expires / Cache-Control

1
2
3
4
5


# 给静态资源加 1 天强缓存
location ~.*\.(svg|woff|js|css)$ {
 root /yourFilePath;
 expires 1d;
}

响应头：
1
expires: Thu, 30 May 2019 20:51:42 GMT
浏览器看到这个头，在到期前不再发请求，直接用本地缓存。

HTTP/1.1 推荐用 Cache-Control 替代 Expires（避免客户端/服务端时钟不同步）：

1
2
3


server {
 add_header Cache-Control max-age=72000; # 20000 小时 ≈ 833 天
}

最强缓存（10 年）：

1
2
3


location ~.*\.(js|css)$ {
 add_header Cache-Control "public, max-age=315360000";
}

8.2 协商缓存：ETag / If-None-Match

为什么需要协商缓存：强缓存过期后，浏览器必须问服务器"我缓存里这份还能用吗"——服务器返回 304 Not Modified（不返回 body）或 200 OK（新内容）。

1
2
3
4
5
6


请求：
If-None-Match: "abc123-etag"

响应（资源未变）：
HTTP/1.1 304 Not Modified
ETag: "abc123-etag"

Vue CLI 默认行为：每个静态资源都生成 ETag，文件名带 contenthash，过期后再请求自动 304。

8.3 强缓存 vs 协商缓存

策略	优点	缺点
强缓存	零请求	资源更新延迟（必须等过期）
协商缓存	实时更新	仍要发请求（带 If-None-Match）

最佳实践：

HTML 文件：不缓存或 no-cache（必须每次校验）

带 contenthash 的 JS/CSS：强缓存 1 年

图片/字体：强缓存 30 天

接口数据：协商缓存或不缓存

9. Vue 实战：compression-webpack-plugin + externals + sourceMap

写作背景：vue-cli@3.4 + Vue 2.6.6。这套配置至今仍适用（Vue 3 改 Vite 后的 vite-plugin-compression 是同一思路）。

9.1 安装

1

npm install compression-webpack-plugin --save-dev

9.2 vue.config.js 完整优化配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


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

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
 configureWebpack: config => {
 if (ENV === 'production') {
 // 1. 预 gzip 压缩
 config.plugins.push(
 new CompressionWebpackPlugin({
 algorithm: 'gzip',
 test: /\.(js|css|html)$/,
 threshold: 10240, // 大于 10KB 才压
 minRatio: 0.8
 })
 )

 // 2. 外部 CDN 化（业务 bundle 不再包含 Vue / VueRouter / Axios）
 config.externals = {
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'axios': 'axios'
 }
 }
 },

 // 3. 关闭生产环境的 sourceMap（节省几百 KB + 防源码泄露）
 productionSourceMap: false
}

9.3 index.html 配合 externals

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<body>
 <div id="app"></div>

 <!-- 仅在生产环境引入 CDN，dev 时 webpack 自己注入 -->
 <% if (NODE_ENV === 'production') { %>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
 <% } %>
</body>

注意：vue.config.js 里的 externals 键名要与 CDN 暴露的全局变量名大小写一致——'vue': 'Vue'（小写 vue 是 import 名，大写 Vue 是全局变量）。

9.4 为什么这样能把首屏从 10s 压到 2s

优化项	节省
预 gzip	静态资源体积 -70%
externals	业务 bundle 减半（~500KB → 250KB）
productionSourceMap: false	节省 200-500KB 隐藏文件
拆 vendor（vue-cli 默认）	利用浏览器强缓存
配合 nginx gzip + HTTP/2	传输再减 70%

作者实测：个人站点首页从 10s 降到 2s（4G 网络 + Chrome 70）。

10. 首屏时间从 10s 到 2s 的真实案例

阶段	体积	首屏时间	优化项
初始版本	1.2MB	10s	无
加 gzip	480KB	6s	nginx gzip on
加 CDN	320KB	4s	externals + bootcss
加 HTTP/2	320KB	3s	listen 443 ssl http2
强缓存 + 预 gzip	320KB	2s	完整组合

压测工具：

Chrome DevTools → Network 面板（看瀑布图、size、time）

Lighthouse（自动打分，给出优化建议）

WebPageTest.org（多地点、多浏览器测试）

curl -w '%{time_total}\n' -o /dev/null -s <URL>（CI 中压测接口）

小结

前端性能优化不是单点突破，是**“代码 + 服务器 + 框架"三层联动**。优先级：

先量后优：用 Lighthouse / WebPageTest 跑一次，定位瓶颈
后端优先：开 gzip + HTTP/2 + 强缓存，能秒减 70% 体积
代码层：拆 chunk + externals + 雪碧图
框架层：Vue 用 compression-webpack-plugin，React 用 vite-plugin-compression
持续监控：接 Sentry / 自建 RUM，监控真实用户的 FCP、LCP

下一步：本文专注"前端资源加载"层。Web Vitals 时代要看 LCP（Largest Contentful Paint）、CLS（Cumulative Layout Shift）、INP（Interaction to Next Paint）三大指标——单看"首屏时间"已经不够。

Vue on Liangweidong's blog

Vite 7 构建工具：从入门到 React / Vue / TypeScript 工程化实战

目录

1. Vite 是什么

1.1 核心特性

1.2 为什么快：传统 vs Vite

2. 环境要求

3. 创建 Vite 项目：5 种模板

3.1 命令行创建

3.2 直接指定模板

3.3 Rolldown-Vite 实验性选项

4. 项目结构详解

5. Vite 核心配置文件

6. TypeScript 集成

7. 路径别名 @ 配置

7.1 vite.config.ts

7.2 tsconfig.json（必须配，否则 TS 找不到）

8. 反向代理与 HMR

8.1 代理后端 API

8.2 HMR 配置

8.3 在 React 中接受 HMR

9. 多环境变量 .env 管理

9.1 .env.development

9.2 .env.production

9.3 package.json scripts

10. 生产构建：Rollup 与 Rolldown 实验

10.1 默认 Rollup 打包

10.2 关键选项

10.3 启用 Rolldown 实验

11. 代码风格：ESLint + Prettier

11.1 ESLint 9 扁平配置（vite create 自动生成）

11.2 Prettier

12. VSCode 必装插件

13. Monorepo + pnpm workspace 实战

13.1 pnpm-workspace.yaml

13.2 apps/web/package.json

13.3 packages/utils/package.json

13.4 跨包引用

14. Vite vs Webpack 性能对比

15. 常见排错

15.1 TS2307: Cannot find module ‘./App.vue’

15.2 import path 找不到

15.3 代理 404

15.4 端口被占用

小结

参考资料

UniApp 跨端开发：Vue 语法一次编写，10+ 端发布

目录

1. UniApp 是什么

2. 环境准备

2.1 推荐方式：HBuilderX（官方 IDE）

2.2 命令行方式（适合习惯 Webpack/Vite 的工程师）

3. 创建项目

3.1 命令行（vue-cli）

3.2 HBuilderX

3.3 运行

4. 目录结构

5. 条件编译：跨端兼容的关键

5.1 模板条件

5.2 JS 条件

5.3 CSS 条件

5.4 常见条件编译关键字

5.5 实战：H5 显示分享按钮 / 小程序隐藏

6. UniApp 生命周期

6.1 应用生命周期（App.vue）

6.2 页面生命周期

7. 页面与路由

7.1 pages.json 配置

7.2 路由 API

7.3 接收参数

8. 常用 API：网络 / 存储 / 位置

8.1 网络请求

8.2 数据存储

8.3 位置

8.4 系统信息

8.5 弹窗

9. 跨端注意事项与坑

9.1 v-if 替代 v-show

9.2 标签必须闭合

9.3 没有 <img> 标签

9.3 没有 `<img>` 标签

9.4 没有 `<a>` 标签

9.5 没有 `<div>`，用 `<view>`；没有 `<span>`，用 `<text>`