专栏首页李成熙heyli性能优化三部曲之一——构建篇

性能优化三部曲之一——构建篇

背景:

  1. 接手新项目,发现项目最基本的文件压缩没有,离线包有多余文件,md5也并没有做好,
  2. 构建是用coffeescript写的,维护成本及交接成本大,关键的是,构建维护的人离职了
  3. 作为新人,希望从头写一个构建,这样为以后独立开展项目获取经验

页面情况:

手Q群成员分布页面。每天PV约260万,约60万人点击活跃群成员头像,点击申请加群14万人,转化率约5%。

示例连接,需要QQ登录态,可到腾讯网门户进行登录: 链接

目标:

  1. 对文件进行压缩
  2. 删除离线包冗余文件,精简大小
  3. 对文件名md5化

成果:

1. 构建工具搭建的思路及原则总结

这次的构建优化主要带来的思考是,一个基本的构建、优秀的构建分别是怎么样的。

我们应该引入怎么样的评判标准呢? 市面上还没有人做过标准的回答。一般而方,作为构建,它的使命是提高开发人员的效率,并能对项目进行足够的性能优化。也就是说, 开发效率及性能优化应该作为两个最基本的评判标准。

对于一个前端项目而言,基本的构建功能应该包括下面的功能。

(1) 文件复制 (2) 文件压缩 (3) 文件md5 (4) 文件打包及合并 (5) 文件内联 (6) 合图

在构建工具的选择的时候,如果包含这些功能的话,那么称得上是“合格”的构建工具。它的目标,是为前端的项目带来最为基本的优化和开发效率。如果结合手Q的业务来说,那么离线包和cdn路径替换也应该作为第7和第8点的基本功能。

那么什么算是优秀的构建呢。优秀构建应该比基本的构建带来更进一步的开发效率和项目性能优化方面的提升。一些比较好的构建特性可能会被包含在内,例如图片压缩、实时刷新、性能上报打点生成、自动化测试、代码性能优化检测等等。除此之外,更优秀的构建会做的是,结合自己业务的需求,将打包、部署测试、发布等一系列流程打通,形成整个开发的闭环。

根据学习需要,参考了Simple,我写了一个基本的构建工具,steamer-gulp(蒸汽机的意思,第一次工业革命的动力之源。寓意给前端带来自动化)。这个构建代码大约300多行,由于学习需要,代码会稍有冗余之处,但比较便于新人学习及修改。

对于构建的功能来说,第三方插件有时候是你非常重要扩展功能的重要途径,而且功能插件化,能使你的构建更加精炼,代码更为优雅。但有时候你并不能找到令人满意的插件,这时候你就需要动手自己写。grunt的插件并不能开发,因为只是文件的操作,而gulp的插件在开发之前,你要首先理解清楚stream和buffer的概念,并阅读一下官方的文档和例子。下面三个链接提供了中文官方文档和两个笔者开发用于steamer-gulp的插件例子:

(1) 插件开发 (2) gulp-bigpipe-template (bigpipe模板生成) (3) gulp-inline-res (内联js, css和html)

2. 构建的文件目录组织方式

使用构建的时候,你会发现会被约束各种文件应该放的位置,以及文件名的命名。Simple和steamer-gulp采用的是常用的约束方式,同类型的文件就放在相同的文件夹下,我们不妨将之称为同类文件约束方式。但在组件化的大潮下面,越来越多的工程师可能会采用组件化的思维的约定方式。与同一组件相关的文件归到组件的文件夹下面。UC浏览器的张云龙,以及旁边组的Q.js框架的构建,都推崇后一种的思路。这种思维我们可将之称为组件化约束方式

同类文件的约束方式对开发模式的采用并没有很大的限制,你可以自由选择喜欢的开发模式。至于组件化的约束方式,它推荐,并且很大程度限制于使用组件化的开发思路,在js开发的时候喜欢采用观察者模式或者中介者模式。例如Q.js喜欢采用emit和on分发和监听事件,React目前的最佳实践是类flux框架(flux采用观察者模式,redux采用中介者模式)。

手Q群成员分布一开始就采用了同类文件约束方式。在搭建steamer-gulp的时候,也曾考虑过使用组件化的约束方式。但一旦选择这类约束方式立即就会面临问题。其一,组件化约束方式看来无法脱离组件化的开发方式,如果新人对这种开发方式不熟悉,开发起来会比较痛苦。其二,即使熟悉组件化的开发方式,你也要面临组件化开发框架的选择问题。例如,如果你选择还未成熟的Q.js框架(期待逐渐成熟),开发效率并没有带来提升,倒不如使用兴趣部落的老王模型结合同类文件约束方式开发得爽。

3. 性能

性能会与预期一样更好,但做这些基本的优化也跟预期一样,并不会带来非常大的优化。性能其实不算是这次成果的重点。另外,离线包大小通过构建离线包由原来的423kb,减少到247kb。节约了带宽成本,加快了用户下载离线包的速度。

总结及展望

通过构建,我们可以达成开发效率的提升,以及对项目最基本的优化。因此,能够通过构建自动化做到的优化和效率提升,请尽量做足。这样才能让我们有更多时间将优化花在更为精辟独到、难以自动化的优化层面上。

但仅仅通过构建达到的优化其实还是有限的,更大范围的优化还需要建立于前端的工程化之上。前端工程化是一个很广阔与高深的话题就不在本文篇幅里面,作为新人,在用好构建工具之后,可以对前端工程化作进一步的探讨与尝试。

写这篇文章也是为了引起新人对构建的重视。作为新人,仅仅信手拿别人的构建使用并不足够,我们还需要有能力动手搭建或完善我们使用的构建工具。

附: 构建工具学习好文章

webpack: 一小时包教会 —— webpack 入门指南 Webpack 和 React 小书 webpack-demos webpack 教程大全

gulp: 前端构建工具gulp入门教程 Gulp入门教程 Gulp 范儿——Gulp 高级技巧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 印记中文推出文档CDN + COS部署方案

    本文主要描述方案大体的实现过程,如果你是技术文档的管理者,苦于没有优秀的文档部署方案,可以联系印记中文(docschina),我们会提供接入服务。如果你遇到性能...

    李成熙heyli
  • webpack Performance: The Comprehensive Guide

    Introduction For beginners, webpack building performance is sometimes annoying. ...

    李成熙heyli
  • 教你如何读webpack2中文文档

    经过一个多月的奋战,webpack2的中文文档已经翻译好大部份,并且完成了核心内容“概念”和“指南”部份的校对。 这份文档比react, vue之类的文档都要庞...

    李成熙heyli
  • jenkins学习之多项目构建

    多项目构建,即指的是同时构建多个源代码中的项目,我所知道的有两种方法,一种是在某个项目“构建完成后操作”中设置如下: ? 另外一种是借助于插件——Multi...

    用户1141560
  • Jenkins 的 Pipeline 脚本在美团餐饮 SaaS 中的实践

    在日常开发中,我们经常会有发布需求,而且还会遇到各种环境,比如:线上环境(Online),模拟环境(Staging),开发环境(Dev)等。最简单的就是手动构建...

    DevOps时代
  • 对Jenkinsfile语法说不,开源项目Jenkins Json Build挺你

    我所在的组织项目数量众多,使用的语言和框架也很多,比如Java、ReactNative、C# .NET、Android、iOS等,部署环境也是多种多样比如Tom...

    LinuxSuRen
  • Jenkins的Pipeline脚本在美团餐饮SaaS中的实践

    本文作者来自美团成都研发中心(是的,我们在成都建研发中心啦)。我们在成都有众多后端、前端和测试的岗位正在招人,欢迎大家投递简历:songyanwei@meitu...

    美团技术团队
  • Look,容器中应用的构建方法!

    S2I增量构建重用以前构建的image中的工件 要创建增量构建,请修改BuildConfig策略定义:

    魏新宇
  • GitHub+Docker Hub实现自动构建镜像

    版权声明:欢迎交流,菲宇运维!

    菲宇
  • complete_code_Chapter1 原

    开发计算机软件已是一个复杂的过程。在软件开发过程中有各种不同的活动(activity):

    青木

扫码关注云+社区

领取腾讯云代金券