前端构建缓存从本地到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 ~/.npmyarn缓存# 查看yarn缓存目录 yarn cache dir # 清理yarn缓存 yarn cache clean # 查看缓存大小 du -sh ~/.cache/yarnpnpm缓存# 查看pnpm缓存目录 pnpm store path # 清理pnpm缓存 pnpm store prune # 查看缓存大小 du -sh ~/.pnpm-store2. 构建工具缓存构建工具缓存是指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 Code3. 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/checkoutv3 # 缓存node_modules - name: Cache node_modules uses: actions/cachev3 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/cachev3 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_SLUG3. 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. 依赖优化使用pnpmpnpm的依赖管理更高效缓存更节省空间锁定依赖版本使用package-lock.json、yarn.lock或pnpm-lock.yaml锁定依赖版本**减少依赖体积