怎样通过 Dockerfile 优化大体积静态资源镜像压缩比教程

多阶段构建配合轻量基础镜像（如Alpine或Distroless）和构建时清理，可将含JS/CSS/图片的Web镜像从800MB压至60MB左右；核心是仅打包运行必需文件，剔除构建产物、开发依赖与临时缓存。

直接用多阶段构建剥离静态资源，再配合轻量基础镜像和构建时清理，能把含大量 JS/CSS/图片的 Web 镜像从 800MB 压到 60MB 左右。核心不是“压缩文件”，而是避免把构建产物、开发依赖、临时缓存一起打包进最终镜像。

选对基础镜像：别让 70MB 的系统拖垮你的 5MB 应用

静态资源服务（比如 Nginx 托管前端）不需要 Shell、包管理器或编译工具。Ubuntu 或 CentOS 镜像自带大量冗余组件，光基础层就占 70–200MB。换成 Alpine 或 Distroless 可立减一半以上体积。

• 推荐首选 Alpine：5.5MB 起步，支持 apk 安装必要运行时（如 tzdata、ca-certificates），且兼容绝大多数静态服务配置
• 极致精简用 distroless：Google 提供的 gcr.io/distroless/static-debian11 仅 2.5MB，无 shell、无包管理器，适合只跑 Nginx 二进制或自定义静态服务器
• 避开 Ubuntu:latest / node:18 等全功能镜像——它们默认带 npm、python、gcc 等，静态部署完全用不到

多阶段构建：把构建环境和运行环境彻底分开

很多镜像臃肿，是因为把构建过程（npm install、webpack 打包、压缩混淆）和最终服务混在同一个镜像里。多阶段构建能确保只有生成的 HTML/JS/CSS 文件进入最终层。

• 第一阶段用 node:18-alpine 完成构建：COPY . . && npm ci && npm run build
• 第二阶段用 nginx:alpine 或 alpine:3.18 + 手动安装 nginx：COPY --from=builder /app/dist /usr/share/nginx/html
• 关键点：不 COPY node_modules、src、package.json 等源码和依赖目录，只复制 dist 输出目录

构建时清理：删掉临时文件、调试工具和未用依赖

即使用了 Alpine，RUN 指令若不主动清理，也会把中间产物固化为镜像层。尤其注意 npm/yarn 缓存、压缩包解压残留、临时日志等。

• 在构建阶段末尾加清理命令：&& npm cache clean --force && rm -rf /root/.npm
• 安装工具时用 --no-cache（Alpine）或 --autoremove -y（Debian）：apk add --no-cache nginx
• 避免分多条 RUN：把安装、配置、清理写在同一行，减少镜像层数（每条 RUN 新增一层）
• 删除默认 Nginx 页面、示例配置、未启用模块：rm -rf /usr/share/nginx/html/* && rm -f /etc/nginx/conf.d/default.conf

静态资源预处理：在构建阶段完成压缩与裁剪

镜像体积大，常因未优化的资源本身过大。与其在运行时处理，不如在构建阶段完成标准化压缩，既减体积又提性能。

• Webpack/Vite 构建时开启 compression: true（生成 .gz 文件），Nginx 启用 gzip_static on; 直接返回压缩后文件
• 用 svgo 压缩 SVG、jpegoptim 和 pngquant 处理图片（放在构建阶段，不打进最终镜像）
• 移除 source map、devtools、console.log 等调试内容；禁用未使用的字体、图标库子集

本质上，静态资源镜像瘦身不是靠“打 zip”，而是靠“做减法”：砍掉所有非运行必需的东西，只留下 HTTP 服务器 + 优化后的文件。只要构建逻辑清晰、阶段职责分明，60MB 以内是常规目标，10–30MB 也完全可行。