说说前端动态合并的缺点吧

因为项目的不断扩大, 各种代码的依赖, 现在遇到的就是请求数+维护问题, 比如目录是: reset.css ui-dialog.css ui-smilies.css ui-header.css ui-footer.css ui-page.css ui-center.css ....

等等诸多的样式,现在是 手动在上线的时候把某几个常用的合成common.css, 但现发现一个问题, 比如页面1要用 1,2.css, 而页面3需要用到 1,3,5.css, 不同的会用到不相同的,但也有相同的, 总不能一直手合吧? 手合也是可以,但要更新一个css的时候就要动N多个东东, 很乱很乱... 于是想到动态合并, 想到了 concat,minify,combo, 但经跟领导商量, 被PASS了,原因是会给web server带来负担... 还有人说到用grunt,spm等管理, 1, 我目前不会, 2,像这种先进的技术一定会被PASS掉的... 因为维护性...(小公司你懂的)

我想到的是用 concat,或者minify来引用css/js文件, 1, 改一个全部会同步 2, 引用方便,按需引用自己的

但真心不知道却点是啥? 请大家来讨论下动态合并的缺点吧.... 合并后类似: douguo http://img4.hoto.cn/proxy/?css=/css/index/transition.css,/css3/public_global.css,/css3/public_header.css,/css3/index_recipe.css,/css3/index_food.css,/css3/index_find.css,/css3/index_group.css,/css3/index_topic.css&v=1231234123

xiami http://res.xiami.net/??static/lib/jquery.jscrollpane.css,static/js/plug/poshytip-1.2/src/tip-twitter/tip-twitter.css,static/relation/css/name_card.css?ver=20140326-113848

收藏 1分享浏览 3502
5年前
跟帖
芋头
5年前

不合并分开来加载也并没有太大问题,楼主觉得呢,合并是为了减少http请求么?找个cdn,把资源文件放上去,http请求数的问题基本可以忽略,而且并行加载速度更快。

有时候要换个角度看问题,不要死认 性能优化原则。

沙发
谢亮
5年前

首先比如样式是分模块写的(当初定的模式), 有的需要用有的不需要, 老板一再强调连接数…然后一直让我手动合, 妹的,现在更新一个东东 就合N个东东…头疼

板凳
lwbjing
5年前
@谢亮 真是哪都有你。
地板
苏东Sudo
5年前

你这个最适合的就是combo了。其他办法都麻烦。

4 楼

建议不要做的这么复杂 所有的都合并到一个common.css 把特别大的分开引用。

因为TCP的传输性质(窗口每次都double), 100kb和150kb的下载的时间差其实可以忽略。如果像你说的 1,2.css 和 1,3,5.css 这样分开压缩 你计算过真正获得的value是多少吗? 我看到的是可维护性会变差,每次编译和部署的成本上升,而真正获得的不多。

对于那些特例 可以分开加载 正如1楼说的 不用太在意http连接数 或者可以参考YUI combo之类的解决方法。

5 楼
谢亮
5年前

恩,已经采用 concat 加载, 公用文件里加载公用库/样式, 当前页面加载私有/频道…

6 楼
小猩猩君
4年前

小公司上新技术99%被pass,说多了都是泪

8 楼
前端乱炖
4年前

这种url叫做combo,只要是基于cdn的,性能都不是问题,问题是你如何管理你的时间戳。

9 楼
前端乱炖
4年前

例如:http://assets.souche.com/assets/js/$$lib/jquery-1.7.1.min.js,lib/require.js,lib/jquery.flexslider-min.js

这个是我们网站的静态资源,其实合并很简单,关键是中间加上cdn之后,只有第一次请求会去请求你的合并用的服务器,之后就全是请求cdn上的文件,下次更新的时候,需要通过时间戳来控制cdn重新去拉取新的文件。

这里需要一个自动管理时间戳的服务,如果手动维护那也是可以的,不过就会变得很麻烦。

10 楼
谢亮
4年前

@前端乱炖 恩,现在使用的后端控制的时间缀变量,还行吧,现在用的grunt打包的,没有使用动态合并的,谢谢乱炖大大。。。

11 楼

还是蛮认同芋头的说法的

12 楼

@谢亮 可以考虑用less 既然你是分模块的

13 楼

@前端乱炖 话说乱炖大大在什么公司呀

14 楼
芋头
4年前

引用自:@Stuinfer_叶嘉梁

@前端乱炖 话说乱炖大大在什么公司呀

大搜车 www.souche.com 正在招聘前端和nodejs开发,求贤

15 楼
谢亮
4年前

@Stuinfer_叶嘉梁 恩,但貌似less或者sassgrunt里做watch要费一点点劲,如果有“卡拉”的话就帅了,但开发流程就要再加一步了,现在全用的grunt管理的,还可以满足需求,不行了再说吧,谢谢!

16 楼

@谢亮 用webstrom 实现自动编译嘛 方便多了

17 楼
谢亮
4年前

@Stuinfer_叶嘉梁 唉,俺的电脑跑那个卡的一比比的。。。

18 楼

@谢亮 叫老板换换换

19 楼
谢亮
4年前

@Stuinfer_叶嘉梁 你做俺老板吧,给俺换个至强E5

20 楼
海砂cc
4年前

我们这儿用的stylus,@import 会自动输出到一个css里。

21 楼
AshSnoww
4年前

用fis可以自动编译打包

22 楼
谢亮
4年前

@AshSnoww asp后台fis能打包不啊

23 楼

您好!我是携程旅行网的HR,我们正在招JS高级开发工程师,我们可以提供NB的合作团队以及优厚的薪资福利待遇,如意向,请回复,盼复,谢谢! 联系邮箱:liuzh@ctrip.com联系电话:021-34064880-15042

24 楼
说几句
广告位 点击查看投放指南

我的收藏