[设为首页] [加入收藏]
您现在的位置:主页 > 新闻中心 >

问诊webpack:从何而来去往何处

[时间:2022-04-21 10:53来源:未知作者:admin浏览:]

  杨高明——转转集团深圳前端负责人。15年在北京加入初创的转转公司,曾任转转APP(数百万DAU)的客户端技术专家,负责客户端架构及新技术探索工作。19年起,切入前端技术领域,现任前端高级技术专家,负责集团在深圳侧的前端团队。目前主要致力于前端和客户端技术融合在性能、体验、成本上的探索和实践。

  webpack是一个很重的话题,网上关于如何写配置、如何写loader、写plugin的文章一搜一堆。甚至业内为了调侃webpack配置的复杂性,发明了一个工种“webpack配置工程师”。如何写配置、loader、plugin,在我看来是一种“查阅性知识”。用的时候,能快速查到,不用的时候,真记不住。

  但是如果对webpack的认识仅仅停留在这个层面,总感觉和webpack还是很陌生,和webpack之间依然搁着一层看不见、摸不着的面纱。

  这层“面纱”背后是什么?小编觉得应该是宏观层面对webpack设计理念的认知。如webpack从何而来、要解决什么问题、如何解决这些问题,未来如何演变等等。但是,如果使用百度或者谷歌搜索“webpack 设计理念”,你会发现,得不到太多内容,坦白讲,几乎没有。

  感观上来讲,webpack和node.js八竿子打不着。但是,将新生事物的诞生,放在它所属的历史环境下去看,就会发现中间还有些奇妙的因果关系。

  通过上图的颜色可以区分为三大生态,一是以粉红色为代表的JS模块化发展路线。另一个是橙色为代表的node.js生态扩张路线。最后一个是以橘红色为代表的webapck。

  在webpack的第一次提交的README.md中,我们可以看到作者非常清晰而纯朴的愿望:

  由上述可见,webpack作者看到node.js生态中存在着大量的js代码,却不能够被浏览器端复用。所以就萌生了想把基于CommonJS规范的模块化代码,打包成能够被script加载的模块。所以,说一句webpack缘起于node.js应该是不过分的。

  如果我们从webpack的官方文档去了解它,会发现它具备的功能非常多。ts加载、图片加载、sourcemap、代码压缩、代码分割、热加载、treeshaking等等....

  到底哪一个才是webpack的核心功能?到底哪里才是webpack的扩张边界?难道随着版本的迭代,webpack的功能会一直无限制地膨胀下去吗?指引作者背后的发展思路,到底是什么?

  其实上述种种疑问,早在作者写的第一个commit中的package.json文件中作过解释:

  webpack从诞生之初,到现在的5.x版本,初心一直未变:bundle(打包/构建)。

  只是随着前端技术生态的不断演化和繁荣,出现了很多新的花样:ts、vue、electron、es6等等。为了应对这些新的趋势,webpack的生态也不断往前发展、扩张。但是,还是那句话,无论webpack如何发展、扩张,初心一直未改,一直都是专注于“打包”。当然,为了让“打包”这个事情更简单、舒适。webpack顺带解决了很多“打包”需要的周边小功能。比如代码分割、按需加载、CDN加速、treeshaking等等。

  可以想象一下,如果让我们自己为浏览器设计一个“打包工具”,我们需要考虑哪些问题?

  首先,得想办法把浏览器无法直接识别的vue、ts等文件,转换成可以被认识的js文件。另外,如果一个vue、ts模块中引用了其它模块,得想办法通过分析得到他们的依赖关系,然后把他们打包在一起。

  最后,还要考虑,将所有依赖模块全部打包在一个文件中,网络请求时可能会比较慢,得想办法解决。

  其实,想到以上三点,就已经可以触及到webpack的设计灵魂了。webpack作者在最初设计的时候,需要解决的核心问题,其实也基本是上述三点。但是,普通人和大神之间的区别是,普通人也就是想一想。而大神却可以给出一个堪称完美且能够经受时间考验的架构方案,解决上述问题。

  为了解决上述三个问题。首先webpack作者提出一个构想“万物皆module”。无论是js代码文件、还是各种图片资源,最终都用“module”的概念将之归拢。作者也通过“module”的概念,将各种复杂混乱的文件类型,拉齐到了一个平等的关系轴上。

  其次,webpack作者通过设计了以下4个概念:Entry、Output、Loaders、Plugins,为webpack实现了一个结构清晰、功能开放、可以持续迭代的的架构设计。

  这几个概念,我们在配置webpack时经常遇到。但往往只是盲人摸象,得其局部,而不得其整体。为了加深对这4个概念理解的整体性,我们再画一张图,体现webpack作者的设计思路。

  同时,因为Plugins和Loaders是对外开放的设计,所以保证了webpack拥有持续的灵活性。如果用一句话点评webpack的架构设计的话,那就是:简洁而富有生命力。

  如果说“打包”是webpack第一核心的能力,那么“拆包(代码分割)”就是webpack第二核心的能力。其实这个道理很好理解。“打包”和“拆包(代码分割)”本来就是一对共生体,如果webpack仅仅只关注于“打包”,那么最终出来的“包”也可能会因为体积太大而不实用。

  如果我们深刻理解了为什么会有webpack以及webpack到底解决什么问题时,就会发现在知名软件中,其实webpack并没有所谓的“竞品”。

  产品定位是打通node.js与浏览器端JS代码资源的模块打包器。虽然,现在webpack的loader和plugin功能让它看起来无所不能,但是webpack对自己是个模块打包器的定位始终没有变化。看起来强大,只是webpack开放性设计带来的额外好处。

  是一个任务执行者,有大量现成的插件封装了常见的任务,也能管理任务之间的依赖关系,自动化执行依赖的任务。

  webapck本质是模块打包器,因为其开放性设计,恰好可以做一些构建工具的工作;Grunt是纯粹的任务执行者;Gulp的定位才是构建工具。

  怎么说呢,webpack误打误撞,侵入了其它产品的目标领域。但webapck的初衷始终没变。最后,再来回味一下webpack官网的这句话:

  6月10-11日,即将于深圳举办的2022K+全球软件研发行业创新峰会特邀杨高明,为大家带来“转转标准webview建设之路”主题演讲。返回搜狐,查看更多今晚特马开奖结果

网站首页上海奇猫电子商务有限公司社区新闻中心企业文化地方资讯