移动前端优化,应该找对干爹!

我的目录

1:webpack文章推荐

2:叶小钗文章推荐

3:我的项目优化

1>> 如果说前端构建的嗲是grunt,那么干爹就是gulp,以及新干爹(webpack):

Webpack能够和 gruntgulpkarma 等已有工具很好地集成。而Webpack自己并不提供模块的下载,但它可以和已有的包管理器很好的配合,我们依然可以用npmBowercomponent等来管理你的Web开发资源,同时在Webpack中加载它们。

文章推荐如下:

 Webpack 为Web开发而生的模块管理器 :http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/

2>> 前端有太多的优化手段值得考虑以及深思,之前看过叶哥前端的最佳实践,觉得很受启发,文章推荐如下:

浅谈移动前端的最佳实践:http://www.cnblogs.com/yexiaochai/p/4219523.html

3>>我就讲我在我的spa项目中,针对项目优化的一个点进行介绍:  针对请求做优化,做好模块化的工作

如果说MVVM的亲爹是knockout,那么它的干爹估计就是 AngularAvalonVueReact 等等,选择好一个好的mvvm框架对于项目优化维护也是很重要的,这里小菜我就不针对各个框架的好坏进行说明,孰优孰劣我觉得实践+适合的场景是最好的检验方法,我项目里选用的框架是Vue + Webpack,自己一直很关注它,觉得它很专注。

webpack.config.js 文件配置如下:

我觉得移动优化中,其中最值得去做的优化是,针对请求做优化,那么就必须得针对项目做好模块化了。

比如说:开发的时候是这个样子:

index.css
index.js
template.html

最终发布是这个样子:
build1.js

3个请求,合并成1个,这个优化是最明显的。

截图如图1:

截图如图2:

时间: 2024-10-10 00:37:56

移动前端优化,应该找对干爹!的相关文章

【前端优化之渲染优化】大屏android手机动画丢帧的背后

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程H5站点的优化,在这方面有一些心得,但是与宇果交流的过程中发现我们在优化的时候忽略了一些细节. 携程做优化的时候整个重心基本放到了尺寸的缩减,和宇果的交流过程中他提出了渲染优化,其实渲染优化无非是减少回流,对于减少回流我们也有一些概念,我一直认为这个事情应该业务开发关注而不是框架关注(事实上框架也无

【转】关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别是硬件采购的成本都由总公司来承担,当然互联网业务上的市场营销成本这块还是由该事业部自己承担,可是网站一年运维下来,该公司发现该事业部里最大的成本居然不是市场营销的开销,而是短信业务和宽带使用上的开销,是不是有点让人感到意外呢?下面我来分析下这个场景吧. 短信这块是和通讯运营商有关,很难从根本上解决,

关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)

Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳的预期效果,今天我在这里分析下浏览器和服务端通讯的一些细节问题,希望通过分析这些细节问题,能给大家一个启迪,能更好的理解这些优化原则背后的隐秘,最终能更好的运用这些原则. 网站的通讯技术是构建在http协议上,http协议底层通讯手段使用的是tcp/ip协议,但是tcp通讯协议在建立连接和断开连接这

Web前端优化最佳实践及工具集锦

前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方.Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能. 这些优化不仅仅可以给用户提供更好的体验,从开发者角度来说,进行优化还可以减少页面的请求数.降低请求所占的带宽.减少资

关于大型网站技术演进的思考(十九)--网站静态化处理—web前端优化—上(11)

网站静态化处理这个系列马上就要结束了,今天我要讲讲本系列最后一个重要的主题web前端优化.在开始谈论本主题之前,我想问大家一个问题,网站静态化处理技术到底是应该归属于web服务端的技术范畴还是应该归属于web前端的技术范畴,要回答清楚这个问题我们要明确下网站应用的本质到底是什么?网站的本质其实就是BS,这里的BS我没有带上架构二字,而就是指Browser和Server即浏览器和服务器,而网站静态化技术的作用目标就是让客户端即浏览器的用户体验更好,但是如果我们想让网站在浏览器上运行的更快,在更快的

前端优化:BigRender

前言 有对象才叫跨年,没对象叫熬夜.所以,在这没对象的元旦假期的夜里捣弄了一下前端优化的东西.如果你听说过FaceBook,太好了,你肯定是个网 络潮人:如果你还听说过FaceBook的bigpipe,那么你多数和我一样是单身IT狗.很好,那么今天我就说说bigrender吧,你没看错,我 也没写错,我想讲的就是bigrender,前面讲的都是废话. 介绍 bigrender是前端优化的技术,从字面上都可以很清楚的理解这一技术特点.big(大)& render(渲染),如果翻译不对,请骂度娘.b

前端优化带来的思考,浅谈前端工程化

重复优化的思考 这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线

web前端优化之combo handler 的引入(3)

背景 Combo Handler 是 Yahoo! 开发的一个 Apache 模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数. 目的 它满足 Yahoo! 前端优化第一条原则:Minimize HTTP Requests,来减少三路握手和HTTP请求的发送次数. 国内实例 淘宝网首页meta里多个js合并的声明: js之间用英文逗号或&符号分隔.此src的Response是多个js文件的内容拼装. 国内的 Combo Script 支持