menu:
- 构建工具发展简史
- 什么是 webpack
- 常见其他的构建工具
- 未来展望
- 总结
构建工具发展简史
在最早无构建工具的时代 需要处理代码压缩,合并... 都需要基于其他语言完成例如(C,Java...) 来实现, 其中最典型的 JSMin 用于去除 JS 代码注释与空格的工具, 这使得效率非常低下.
在 NodeJS(2009) 与 NPM(Node Package Manager2010) 的发布逐渐改变了这个现状, 许多之前依赖于其他语言完成的 工具包都可以通过 NodeJS 来进行实现 并 发布到 npmjs.org 当中, 2012 年包数量为 6000 仅仅过了 2 年 2014 年包数量爆发式的增长到 5W, 前端工程化也是在这一时期开始 迅猛发展. 其中有大量的 自动化工具来替代手动处理与执行.
综上所述我们使用 自动化工具的原因大致可以分为以下几点 语法降级, 源码转换, 压缩与混淆, 图片处理(压缩/转换).
最后我们关注技术选型, 在项目开发初期技术选型上我们主要关注其 性能, 功能需求, 生态, 学习曲线, 兼容性, STL 其 6 个大点
什么是 webpack
想要认识什么是 webpack 我们先认识 "构建工具" 的发展, 构建工具用于 前端开发过程中编写的 代码,样式,资源,打包,优化 为可供浏览器高效运行的 工具, 你应该可以看出 构建工具 就是 前端的自动化流程的工具
常见构建工具对比
构建就是将 源代码转换为发布线上可执行的代码, 具体做的事情如下
- 代码转换: TS -> JS, SCSS -> CSS
- 文件优化: 压缩 代码,压缩与合并图片...
- 代码分割: 提取公共代码, 无序执行部分 转换为 异步加载
- 模块合并: 将多个模块合并为一个文件
- 自动刷新: 监听源码变化并重新自动构建, 刷新浏览器
- 代码校验: 编码是否符合规范以及单测是否通过
- 自动发布: 代码更新完后自动构建并传输给发布系统
Grunt
Grunt 大量的常见自动化流程任务插件, 但是集成度不高 优点: 灵活(只有执行定义的任务), 大量任务插件 缺点: 集成度不高,无法开箱即用
Gulp
Gulp 基于流的自动化构建工具 除了管理与任务执行还支持 监听文件, 读写文件 Gulp 与其他构建工具不同的是 可以获取到 插件处理后的 流数据 优点: 灵活 缺点: 集成度不高
webpack
我们在文章开始就提到 webpack 是一个模块打包器, 所有文件都被 webpack 视作为一个模块, webpack 主要通过 loader 与 plugin 添加功能, loader 可以视作为 翻译官, plugin 可以视为 在一个特定的 阶段添加一个功能. webpack 更适合应用的构建 优点: 开箱即用, 灵活, 生态强大, 体验良好 缺点: 只能用于模块化开发
Rollup
专注于 ES6 模块打包器, Rollup 最大特点就是可以使用 TreeShaking(将无用代码去除) 与 ScopeHoisting(将无意义代码替换为常量值) 对输出的代码进行优化, 但是 webpack4 也已经实现这些功能了, Rollup 并不是要替代 Webpack 因为他们的定位并不相同. rollup 适用于 library 的构建 优点: 开箱即用, 打包出来的代码更小 缺点: 生态与体验与Webpack相差甚远, 功能不成熟
Vite
Vite 使用 esbuild 与 Rollup 作为底层构建工具, 使用 esbuild 预构建依赖(将所有模块都视作 ES 模块, 将多个模块转换为一个模块) 从而加强开发构建的速度. vite 可用于开发 中小型项目 优点: 性能(启动快, 热更新上) 缺点: 性能(首屏加载慢, 懒加载慢), 社区与功能 远不及 Webpack
未来展望
近几年也有越来越多的构建工具使用 Rust 来开发, 不得不说 Rust 性能堪比 C 语言, 拥有者极高的 "安全性"
, 不仅仅是前端工具链使用了 Rust 还包括但不限于 CLI, Web 服务, Terminal, DevOps, 嵌入式设备, 音视频, 加密货币, 搜索引擎, 机器学习, Firefox 浏览器内核 等等 都使用 Rust 来作为构建语言
近几年以下几款新型的构建工具
- Trubopack: Webpack 原班人马 与 NextJS 团队联合开发的构建工具
- Rspack: 对标 webpack, Rspack 很多配置字段与 webpack 相同, 允许 无缝切换到 Rspack
总结
- 构建工具发展简史: 手动处理文件与代码, NodeJS 与 NPM 的发布逐渐改变现状 使用自动化构建工具来完成
- 什么是 webpack: webpack 就是 模块打包器, 将所有文件视作模块 最后输出为可供浏览器执行的 代码文件
- 其他的构建工具: webpack更适合开发应用, rollup 适用于 library, vite 适用于中小型项目
- 未来展望: 在近些年基于Rust应用爆发式增长也包括前端工具链也不断的使用 Rust 编写