前端构建缓存：从本地到CI/CD-平芜编程栈

前端构建缓存：从本地到CI/CD

毒舌开场

嘿，前端er们！你们是不是还在为构建速度而头疼？是不是还在为CI/CD流水线的时间而抓耳挠腮？是不是还在为缓存管理而不知所措？醒醒吧！前端构建缓存来了，它带着更快的构建速度和更稳定的CI/CD流程来拯救你们了！

今天我就来扒一扒前端构建缓存的那些事，从本地到CI/CD，让你的构建速度飞起来！

为什么需要前端构建缓存？

在前端开发中，构建缓存是提升开发效率和CI/CD性能的重要手段：

更快的构建速度：减少重复构建时间
更稳定的CI/CD：避免因依赖问题导致的构建失败
减少网络请求：缓存依赖包，减少网络下载
节省资源：减少服务器资源消耗
提高开发体验：减少等待时间，提高开发效率

1. 前端构建缓存的基本概念

什么是前端构建缓存？

前端构建缓存是指在前端构建过程中，对依赖包、构建产物等进行缓存，避免重复构建和下载，提高构建速度。

缓存的类型

依赖缓存：缓存npm、yarn、pnpm等包管理器的依赖
构建缓存：缓存构建工具（如webpack、vite等）的构建产物
CI/CD缓存：在CI/CD流程中缓存依赖和构建产物

缓存的优势

提高构建速度：减少重复构建时间
减少网络请求：缓存依赖包，减少网络下载
节省资源：减少服务器资源消耗
提高开发体验：减少等待时间，提高开发效率
更稳定的构建：避免因网络问题导致的依赖下载失败

2. 本地构建缓存

1. 包管理器缓存

包管理器缓存是指npm、yarn、pnpm等包管理器对依赖包的缓存。

npm缓存

# 查看npm缓存目录 npm config get cache # 清理npm缓存 npm cache clean --force # 查看缓存大小 du -sh ~/.npm

yarn缓存

# 查看yarn缓存目录 yarn cache dir # 清理yarn缓存 yarn cache clean # 查看缓存大小 du -sh ~/.cache/yarn

pnpm缓存

# 查看pnpm缓存目录 pnpm store path # 清理pnpm缓存 pnpm store prune # 查看缓存大小 du -sh ~/.pnpm-store

2. 构建工具缓存

构建工具缓存是指webpack、vite等构建工具对构建产物的缓存。

webpack缓存

// webpack.config.js module.exports = { // 缓存配置 cache: { type: 'filesystem', // 使用文件系统缓存 buildDependencies: { config: [__filename] // 当配置文件变化时，重新缓存 } } };

vite缓存

Vite默认使用文件系统缓存，缓存目录为node_modules/.vite。

// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ // 缓存配置 cacheDir: 'node_modules/.vite', // 缓存目录 optimizeDeps: { // 依赖优化配置 cacheDir: 'node_modules/.vite/deps' // 依赖缓存目录 } });

3. 编辑器缓存

编辑器缓存是指IDE和编辑器对项目的缓存，如VS Code的缓存。

VS Code缓存

VS Code的缓存目录通常在~/.vscode，可以通过以下方式清理：

关闭VS Code
删除~/.vscode目录中的缓存文件
重新打开VS Code

3. CI/CD构建缓存

1. GitHub Actions缓存

GitHub Actions缓存是指在GitHub Actions工作流中缓存依赖和构建产物。

配置示例

# .github/workflows/build.yml name: Build on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 # 缓存node_modules - name: Cache node_modules uses: actions/cache@v3 with: path: node_modules key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} restore-keys: | ${{ runner.os }}-node- # 安装依赖 - name: Install dependencies run: npm ci # 构建 - name: Build run: npm run build # 缓存构建产物 - name: Cache build output uses: actions/cache@v3 with: path: dist key: ${{ runner.os }}-build-${{ github.sha }}

2. GitLab CI缓存

GitLab CI缓存是指在GitLab CI/CD流水线中缓存依赖和构建产物。

配置示例

# .gitlab-ci.yml stages: - build build: stage: build script: - npm ci - npm run build cache: paths: - node_modules/ - dist/ key: $CI_COMMIT_REF_SLUG

3. Jenkins缓存

Jenkins缓存是指在Jenkins流水线中缓存依赖和构建产物。

配置示例

// Jenkinsfile pipeline { agent any stages { stage('Install dependencies') { steps { // 缓存node_modules cache { paths { return [ 'node_modules' ] } key { return "npm-${env.BRANCH_NAME}-${hashFiles('**/package-lock.json')}" } } sh 'npm ci' } } stage('Build') { steps { sh 'npm run build' } } } }

4. CircleCI缓存

CircleCI缓存是指在CircleCI流水线中缓存依赖和构建产物。

配置示例

# .circleci/config.yml version: 2.1 jobs: build: docker: - image: cimg/node:16.13.0 steps: - checkout # 缓存node_modules - restore_cache: keys: - v1-dependencies-{{ checksum "package-lock.json" }} - v1-dependencies- - run: name: Install dependencies command: npm ci - save_cache: paths: - node_modules key: v1-dependencies-{{ checksum "package-lock.json" }} - run: name: Build command: npm run build # 缓存构建产物 - save_cache: paths: - dist key: v1-build-{{ .Revision }}

4. 缓存策略

1. 依赖缓存策略

基于锁文件：使用package-lock.json、yarn.lock或pnpm-lock.yaml的哈希值作为缓存键
分层缓存：将依赖缓存和构建缓存分开
定期清理：定期清理过期缓存，避免占用过多空间

2. 构建缓存策略

基于内容：使用文件内容的哈希值作为缓存键
增量构建：只重新构建变化的文件
持久化缓存：在CI/CD流程中持久化缓存

3. 缓存失效策略

配置变化：当配置文件变化时，缓存失效
依赖变化：当依赖变化时，缓存失效
代码变化：当代码变化时，构建缓存失效
定期失效：定期让缓存失效，避免缓存过期

5. 缓存优化

1. 依赖优化

使用pnpm：pnpm的依赖管理更高效，缓存更节省空间
锁定依赖版本：使用package-lock.json、yarn.lock或pnpm-lock.yaml锁定依赖版本
**减少依赖体积

前端构建缓存：从本地到CI/CD