前端镜像瘦身核心是分离构建与运行：第一阶段用node:20-slim完成npm ci和build，第二阶段仅COPY dist到nginx:alpine，剔除Node、源码、依赖；再通过production构建、资源压缩、CDN分发及.dockerignore清理，将镜像压至15–20MB。
前端镜像体积优化，核心是把“构建过程”和“运行产物”彻底分开——构建阶段该装啥装啥，运行阶段只留最小必要文件。光靠换基础镜像（比如用 node:18-alpine）能减一点，但真正见效的，是结合多阶段构建 + 打包资源精简分发。
用多阶段构建剥离构建依赖
传统写法把 npm install、build 全塞进一个镜像里，结果 node_modules、devDependencies、源码、缓存全被打包进去。多阶段构建能让你在第一阶段用完整 node 镜像完成构建，第二阶段只 COPY 编译产出的 dist 目录到轻量运行镜像中。
- 第一阶段：FROM node:20-slim → COPY + npm ci + npm run build
- 第二阶段：FROM nginx:alpine → COPY --from=0 /app/dist /usr/share/nginx/html
- 最终镜像不带 Node.js、不带源码、不带依赖，只有 HTML/JS/CSS 和 Nginx
打包产物本身要先瘦身
镜像再小，如果 dist 里塞了未压缩的 source map、重复的 polyfill、整包 moment.js，体积照样难看。得在构建环节就控制输出质量：
- 关闭 development 模式，确保 Webpack/Vite 启用 production 模式（自动启用 Tree Shaking、Terser 压缩）
- 用 Webpack Bundle Analyzer 或 vite-bundle-visualizer 查体积大户，针对性替换或按需加载
- 图片转 WebP + 配置 image-minimizer-webpack-plugin 做构建时压缩
- 避免在打包中引入整个 Lodash，改用 lodash-es + 按需导入
静态资源走 CDN，镜像只留骨架
JS/CSS/字体/图片这些静态资源，没必要全打进镜像。可以配置构建工具输出带哈希的文件名，再通过 externals 或 public 目录配合 CDN 地址引用：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 在 vite.config.ts 中设置 base: 'https://cdn.example.com/'，所有资源路径自动指向 CDN
- 镜像里只保留 index.html 和少量 runtime JS（几十 KB），其余全由 CDN 分发
- Nginx 镜像体积可压到 15–20MB，拉取秒级完成
清理无用层与中间产物
Dockerfile 每条指令都会生成一层，RUN npm install && npm run build 这种写法会把 node_modules 留在中间层里，即使后面删了，体积也不会减少。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 合并 RUN 指令，用 && 连续执行，避免残留文件留在某一层
- 用 .dockerignore 排除 node_modules、src、.git、logs 等非构建必需目录
- 构建时加 --no-cache 参数防止旧层干扰，CI 中建议固定基础镜像 tag（如 node:20.17.0-slim）提升缓存命中率
