前端打包工具大乱斗
共 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 山的意义远大于开始一个新项目
所以这些工具其实都不是对标历史债务的
该自己扛的,还得自己扛