Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

关于 Web 组件打包

  Web 组件应该封装成什么样的形态呢?这是个十分纠结的问题。因为 Web 组件通常由 HTML + CSS + JS + Media 组成,对这些部分单独引入的话感觉聚合度不够,每次需要操作好多地方才能引入一个组件,还要考虑不同项目的目录结构的差异。
  把组件打包成一个 JS 或 HTML 文件的做法也许才是正确的方向。所以 webpack 诞生了,它的加载器模式就非常适合干这件事。借着 React 的风,它瞬间就火了。
  虽然将 HTML、CSS、JS 打包成一个 JS 文件的做法已经被大家所接受,但把图片之类的媒体资源也一起打包进来就有许多人接受不了了。不过根据之前的实验数据,GZIP + BASE64 和直接加载图片的成本相差无几,我是勉强可以接受的。但是这里还有点问题,因为 IE8 对 BASE64 图片的支持是有尺寸限制的,这么做就无法完美兼容 IE8(或者可以将图片切割为 IE8 可以兼容的尺寸再拼起来,虽然有点绕 = =||)。
  除了图片打包外,剩下的问题就是 CSS 打包。在 Scoped Style 和 Shadow DOM 引入之前所有的 CSS 都是全局的,所以很难做到组件化。也许有一些黑魔法的框架可以在 build 时自动给选择器加前缀,这虽然能解决部分问题,但我还是觉得没有 Shadow DOM 的支持还是存在大堆缺陷。CSS 封装一直有个致命的问题「你不影响别人,别人会影响你」。即使把自己的 CSS 选择器全部加上 hash 前缀也很难做出跨项目通用的组件,因为每个项目都有一堆全局的 CSS Reset。比如某个组件依赖于原生的全局样式,放到一个将 box-sizing 重置为 border-box 的框架中就可能出现各种错乱(或许为组件也来个 CSS Reset 可以解决这个问题,但成本太高了)。
  所以说,纵然关于 Web 组件打包的方案有很多,但只要 Web Components 没普及,所有这些都只能用很低端的方式去解决。我已经不想再思考更奇怪的打包方式,坐等社会进步。
网名:
54.146.176.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^