js/ 目录下的 js 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp 目录，并创建 a.css 文件，此文件存放压缩后的 css 代码。 dist/css/a.css gulp 入门指南 - 13 - 本文档使用 看云 构建 使用 gulp 压缩图片 压缩 图片文件可降低文件大小，提高图片加载速度。 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件，压缩它们，将压缩后的文件存放在 dist/images/ 目录下。 gulp imagemin = require('gulp-imagemin') // 压缩图片任务 // 在命令行输入 gulp images 启动此任务 gulp.task('images', function () { // 1. 找到图片 gulp.src('images/*.*') // 2. 压缩图片 .pipe(imagemin({ progressive:

resolve.extensions 配置 合理使用 alias 图片压缩 使用：配置 image-webpack-loader 要求：基于 Node 库的 imagemin 或者 tinypng API Imagemin的优点分析 可以引入更多第三方优化插件，例如pngquant 有很多定制选项 可以处理多种图片格式 Imagemin的压缩原理 pngquant: 是一款PNG IDAT数据 流的大小。 optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸，而不 会丢失任何信息。 tinypng:也是将24位png文件转化为更小有索引的8位图片，同时所有非必要的metadata 也会被剥离掉 tree shaking(摇树优化)复习 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree polyfill.min.js?unknown=polyfill&features=Promise,Map,Set 体积优化策略总结 Scope Hoisting Tree-shaking 图片压缩 动态 Polyfill 公共资源分离

Vite 打包流程 – 重写模块路径 浏览器不支持 JS 中直接写 import CSS、图片、JSON 等语法。 回顾一下 webpack loader 的处理策略： • CSS：转换成 js 的模块，执行模块会在 DOM 中创建