前端技术工程化的一小点实践
来源:互联网 发布:淘宝货到付款怎么关闭 编辑:程序博客网 时间:2024/05/17 22:41
相比于两年前,前端工程化已经成为业内的标杆了,一个成熟的技术团队,必然要去思考这样的一个问题。
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仓库的使用
- cnpm可以搭建至自己的服务器上,可以将一些私有组件放置在服务器上,供团队成员使用,提高开发效率。
- 对于cnpm的使用,文档是极为重要的,在使用cnpm的时候一定要注意把组件的README写的尽量详细。
- 将私有cnpm的scope域名分为@ui、@util、@server,将JS模块简单的划分,有利于高效搜索和使用。
代码规范
在eslint出现之后,前端的代码规范才开始慢慢的落实和成熟起来,以前的lint工具都或多或少有些许不尽如人意的地方,所以导致js的代码规范一直很差,大家可以查查网上各类博客上的js代码,只能用一个脏字来讲了。其实eslint最好的地方在于规则的可配置性极高,可以服务的团队群体也就会更多了。
组件框架的使用
- 目前比较流行的组件框架有react和vue,这两框架在团队合作中最大的好处就在于其组件封装的彻底性。
- 在没有这些框架的时候,我们同样使用jquery封装插件,一样可以提供组件式的开发模式,但是用jquery写过插件的人都应该了解,jquery插件的形式做的不够彻底,依旧和html、css有耦合,使用起来并没有react之类的流畅,而且有时还会产生插件冲突,效率十分低下。
- 组件框架配合cnpm仓库,可是让大部分的团队成员不需要去重复造轮子,所有的基础组件都在cnpm里面,要什么拉什么。组件由专人维护,每个人owner一部分的组件开发,一旦有需求升级就找制定的负责人,提高开发效率。
以上是我个人对于前端技术工程化的一些见解,另外我认为,前端工程化并不只是在技术,很多关于团队内部合作的工程化流程也有很多。其实本篇还少了前端的性能优化,性能优化这方面非常庞大,而且每个网站的性能瓶颈一般都不同,所以本篇就先不聊这方面了。
- 前端技术工程化的一小点实践
- 前端的一些小点
- Web前端工程化的实践思路(一)——背景介绍
- 前端工程化(一)
- 前端工程化架构实践--多页面
- java重载的一小点
- 可靠性设计 的 一小点
- Vector的一小点扩充
- Web前端工程化的实践思路(二)——Web前端工程化的基础
- 前端的工程化
- ExtJs 2.0 公司工程化应用的最佳实践(一)
- 奇迹一小点——js前端学习笔记
- 工作的几个技术小点总结
- 前端工程化的理解
- 对Ajax的一小点看法
- 我对PowerBuilder的一小点感悟
- 关于CSS的一小点心得
- 提交form 的时候一小点注意事项
- Java正则表达式的辨析
- cnpm私有仓库踩坑之旅
- 发送验证码按钮页面计时器
- python
- git回退版本(线上和本地仓库)
- 前端技术工程化的一小点实践
- leetcode题解-123. Best Time to Buy and Sell Stock III
- 分针网—每日分享:移动端适配之rem详解
- oracle创建表空间、用户以及给用户分配权限
- C++标准库addressof的应用
- windows server 2008 R2 和windows 7 安装telnet服务
- CentOS 安装NodeJS V8.0.0
- mysql集群原理
- vim 使用笔记