前言

随着业务的发展和功能的逐步增加，之前的看似不大的核心CSS文件突然变得异常庞大。

这样就产生出了很多的问题。

一是一次性加载这个CSS文件变得很不可取。

首先浏览器的加载速度变慢，特别是第一次加载的时候。

再则浏览器的解析CSS文件也变慢了，进而影响页面的渲染速度。

二是对于开发人员来说，东西越堆越多，维护是个大问题。

但这里有个好处就是第一次加载后，之后加载就直接读的缓存，减少了http请求。

拆分方案

这里我根据自己过往的重构经验，大致把拆分方案分三步走。

第一步：一刀斩

所谓一刀斩就是把首页代码，common部分代码，reset部分代码提出来放入一个css文件里，命名为core.css。

需要说明的是：common部分其实就是通用的那一部分样式。reset部分其实就是样式重置的部分。

这样一来，除了首页之外，其他页面都要加载两个css文件。

当然这是第一步，却是最重要的一步，因为这里面牵扯到了很多很多的页面。可以说第一步就是大致的熟悉及了解整体CSS的构建及与页面的一些个关系。

这一步需要大量的精力去做整理和测试，主要是保证首页没有任何影响。

第二步：釜底抽薪

首先是需要拿到网站主要页面的访问量数据，得出访问量最大的几个页面。 当然，希望是不要超过三个页面，因为过大的话，拆分的意义就变得不那么强烈。

然后把这几个网站的页面css加到core.css里。

其实这一步是可以并入第一步的，但是如果放入第一步的话，会造成第一步任务更烦杂。 我所推荐的是渐进式推进。

第三步：继续推进

把剩余的CSS代码归类整合，拆分出一些不经常变动的部分（可以理解为被遗忘在角落里的页面）以及访问量很小的页面。比如帮助之类的页面。

这一步意义可能不是很大，但是很有必要。

后记

以上是我个人关于主站CSS拆分一个方案，可以总结为一点就是尽可能的优化首页，然后让其他页面有更好的可维护性。