【前端每日一题】webpack做文件压缩 到底是压缩了什么

// 压缩前（未使用的函数）
function unused() { console.log('无用'); }
function used() { console.log('有用'); }
used();

// 压缩后（删除 unused 函数）
function used(){console.log("有用")}used()

1. 其他优化

• • 移除console、debugger等调试语句（通过配置drop_console: true）。
  • 压缩对象字面量（如{name: 'foo'}→{name:"foo"}，去掉多余引号）。

二、CSS 压缩

主要通过css-minimizer-webpack-plugin实现（需手动配置），压缩内容包括：

1. 删除冗余字符

• • 去除注释、空格、换行符（与 JS 压缩逻辑类似）。例：css

/* 压缩前 */
.container {
  width: 100%;
  /* 背景色 */
  background: #ffffff;
}

/* 压缩后 */
.container{width:100%;background:#fff}

1. 简化 CSS 语法

• • 合并重复的样式规则（如两个.box选择器合并为一个）。
  • 简化颜色值（如#ffffff→#fff，rgb(255,255,255)→#fff）。
  • 移除无效的样式（如width: auto !important中无意义的!important，或重复的margin: 0）。
  • 压缩选择器（如合并嵌套选择器，简化层级）。

1. 优化动画与过渡

• • 简化keyframes动画的关键帧（去除重复或冗余的帧）。

三、图片与静态资源压缩

通过image-webpack-loader或 Webpack 5 的asset模块配合压缩工具（如mozjpeg、optipng等）实现，核心是在不明显损失视觉质量的前提下减小文件体积：

1. 图片压缩

• • 对 JPEG/PNG 等格式：通过降低比特率、优化编码算法、去除元数据（如拍摄时间、相机型号）等方式减小体积。
  • 对 SVG 格式：删除注释、空格、冗余路径信息（如合并重叠路径）。
  • 示例：一张 200KB 的 PNG 图片经压缩后可能降至 80KB，视觉上无明显差异。

1. 小图片转 Base64

• • 对体积极小的图片（如 < 10KB），通过url-loader或asset模块转为 Base64 编码字符串，嵌入 CSS/JS 中，减少 HTTP 请求（但会增加代码体积，需平衡）。

四、其他文件压缩

• HTML 压缩：若通过html-webpack-plugin生成 HTML，可配置minify选项压缩 HTML（删除注释、空格，合并属性等）。
• 字体文件压缩：对 TrueType 或 WOFF 字体，可去除无用的字符集（如只保留常用汉字），减小字体文件体积。

总结

Webpack 的文件压缩本质是 **“在保持功能不变的前提下，最大化去除冗余信息”**，具体包括：

• 对代码文件（JS/CSS）：删注释、缩空格、简命名、删死码、合逻辑。
• 对资源文件（图片 / 字体）：优化编码、去元数据、降质量（可控）。

最终目的是减小打包产物的体积，提升网络传输效率，优化用户加载体验。

往期精彩回顾

【前端每日一题】前端分块是如何分的,根据什么分的,分的是chunk还是依赖

【前端每日一题】前端bundle的定义

【前端每日一题】前端chunk是什么