Yard


前端技术工程化的一小点实践

相比于两年前,前端工程化已经成为业内的标杆了,一个成熟的技术团队,必然要去思考这样的一个问题。

webpack 构建

webpack在前端领域的使用率非常高,基本已经成为前端构建领域的标杆。 那么,我们能使用webpack做什么呢?

  1. JavaScript构建 目前JavaScript构建的主要方向在与ES6+转换成ES5的代码,为了浏览器的实现进度、兼容性和高速发展的ES规范做的兼容处理。
  2. CSS构建 以react和vue为代表的组件化框架,基本都是使用CSS-IN-JS去实现组件,CSS-IN-JS的实现又有很多种。
    1. 我们通常使用css-loader去解析CSS-IN-JS的代码。
    2. 在css的基础上我们又可以引入scss、less等预编译器,提高css代码效率。
    3. 在scss、less的基础上,再引入postcss的autoprefixer来提高代码的兼容性,无需手动添加各浏览器的属性名,就可做到各浏览器的兼容,autoprefixer使用caniuse网站上已知的兼容性问题和各大浏览器的内部实现。
    4. 另外对于图片的处理,我们通常使用url-loader这个模块去做处理,小于一定大小的文件就使用base64来替代。
    5. 其他的Icon,可以单独做成IconFont的形式,提高效率和性能。
  3. 代码压缩 js和css代码都是可以压缩的,去除空格和换行就可以节省很多的字节量,继而再开启服务端的Gzip压缩。Gzip的压缩率非常高,可以非常有效的减少带宽资源。
  4. CDN的使用 CDN可以极大的提升网站访问的速度,特别是在大流量的网站时,CDN可以省去很大一部分优化的开销。我们在使用webpack构建的时候,将构建完成的文件统一上传至CDN上,全自动化的构建过程就结束了。

cnpm仓库的使用

  1. cnpm可以搭建至自己的服务器上,可以将一些私有组件放置在服务器上,供团队成员使用,提高开发效率。
  2. 对于cnpm的使用,文档是极为重要的,在使用cnpm的时候一定要注意把组件的README写的尽量详细。
  3. 将私有cnpm的scope域名分为@ui、@util、@server,将JS模块简单的划分,有利于高效搜索和使用。

代码规范

在eslint出现之后,前端的代码规范才开始慢慢的落实和成熟起来,以前的lint工具都或多或少有些许不尽如人意的地方,所以导致js的代码规范一直很差,大家可以查查网上各类博客上的js代码,只能用一个脏字来讲了。其实eslint最好的地方在于规则的可配置性极高,可以服务的团队群体也就会更多了。

组件框架的使用

  1. 目前比较流行的组件框架有react和vue,这两框架在团队合作中最大的好处就在于其组件封装的彻底性。
  2. 在没有这些框架的时候,我们同样使用jquery封装插件,一样可以提供组件式的开发模式,但是用jquery写过插件的人都应该了解,jquery插件的形式做的不够彻底,依旧和html、css有耦合,使用起来并没有react之类的流畅,而且有时还会产生插件冲突,效率十分低下。
  3. 组件框架配合cnpm仓库,可是让大部分的团队成员不需要去重复造轮子,所有的基础组件都在cnpm里面,要什么拉什么。组件由专人维护,每个人owner一部分的组件开发,一旦有需求升级就找制定的负责人,提高开发效率。

以上是我个人对于前端技术工程化的一些见解,另外我认为,前端工程化并不只是在技术,很多关于团队内部合作的工程化流程也有很多。其实本篇还少了前端的性能优化,性能优化这方面非常庞大,而且每个网站的性能瓶颈一般都不同,所以本篇就先不聊这方面了。