前端打包工具大乱斗

前端壹栈

共 1435字,需浏览 3分钟

 ·

2021-03-17 03:05

背景和痛点

过去很长一段时间,人们使用 webpack,或基于 webpack(taro)的插件系统,构建复杂应用

随着项目复杂度的升高,一层层 loader 和 plugin,将开发链路大大延长

过长的开发链路,除了打包时间变慢,更重要的是严重影响力调试,测试,维护

除此之外,case by case 的 AST 转译方式,擅自扭曲语法语义,也是很不地道的行为

从去年开始大家开始意识到这个问题,开始制造链路更短,开发体验更好的打包工具,前端进入打包工具大乱斗的 2021 年

第一类:vite/snowpack/wmr

其中一类是基于 native module 机制开发 bundless 工具,比如 vite,snowpack,wmr

其中 vite 的作者是知名前端框架 vue 的作者,wmr 的作者则是 preact 团队

https://github.com/vitejs/vite

https://github.com/snowpackjs/snowpack

https://github.com/preactjs/wmr

这类工具的机制是一模一样的,本质上是一个 dev server,面向的目标群体是现代 web 应用,比较重要的是对 ssr 的实现

svelte/roolup 作者开源一种 native module 跑到 node 的思路,被 vite,snowpack 所使用

https://github.com/sveltejs/kit

因为 ssr 同构是必须将 native module 跑到 node 端的

与此同时,这类框架还需要借助 rollup 或 esbuild 进行打包和预处理

所以与其说他们是打包工具,不如说他们是不依赖 webpack 的构建工具

第二类:wepack/metro

前面的第一类工具主要是针对现代浏览器,而非 web 平台,也有对应的替代方案

比如 metro 是专门用来打包 RN 的,它的作者是 facebook 官方,未来会成为 RN 的标配

https://github.com/facebook/metro

wepack 是专门用来打包微信小程序的,它的作者是 fre 作者 132

https://github.com/ctripcorp/wepack

这一类工具的共同特点是,他们都是因为非 web 平台产生,并服务于这特定场景

因为 js 不再是一等公民,通常这类工具无法使用 rollup,esbuild 等工具

但无论如何目的都是一样的——抛弃 webpack

第三类:esbuild/swr

第三类工具则以 esbuild 为代表,它的作者是大名鼎鼎的 figma CTO

https://github.com/evanw/esbuild

这类工具通常使用非 js 语言,利用其他语言的天赋来提升编译速度

比如前面提到的 vite 就使用 esbuild 进行预编译

总结

工具众多,大家除了根据自己的业务尝试新型框架,更重要的是理解这些框架的内在

另外,对于公司而言,历史包袱先于新业务,铲平一座 shi 山的意义远大于开始一个新项目

所以这些工具其实都不是对标历史债务的

该自己扛的,还得自己扛


浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报