前端优化杂谈

Posted 2020-06-18

如何组织前端开发中的css以及js代码，相信在开发的过程中是一个比较让人头疼的问题。

我们的目标是：

1. 让代码拥有较好的可维护性，提高代码的重复利用率。
2. 尽可能少的减少引入的css以及js的文件数量，因为过多的http请求会一定程度影响页面加载的效率。
3. 尽量少的引入与页面无关的代码，即减少代码冗余。

 

但要同时满足以上三个条件不容易，在后续的优化中，我们只能尽可能的平衡这种关系。

说到底就是如何处理代码的可维护性以及代码的性能，但不管怎么样，代码的可维护性应该是我们更应该重视的。现在的计算机都比较快，未来还会更快，在保证拥有较好的用户体验下，我们尽可能的提高我们的代码质量，这样就够了。

目前的开发中，我们用requireJs来实现模块化开发，一个大模块就是一个js文件，大模块中还有小模块，模块与模块之间通过接口互相调用，模块之间拥有较低的耦合度可以方便我们对代码的管理，提高代码利用率。

对模块的加载方式也是我们应该考虑的问题之一，这里参考AMD和CMD的规范。简单的说就是加载模块时采用预加载还是延时加载。具体问题具体分析，不同场景使用不同的方式。requireJs一开始是基于AMD的规范开发出来的，现版本的requireJs同样支持CMD的使用模式。

 

接着说说怎么组织css代码。

 

css文件大概分为三大类：

1. 全局通用模块
2. 局部通用模块
3. 私有模块

 

一、全局通用样式：这类css每个页面都会引用，需要在页面头部引用，前期开发可分成多个文件方便管理，后期生产环境可压缩合并成一个文件（common.css）。

1. 重置样式（reset.css），这类样式主要是统一各大浏览器的默认样式。
2. 图标样式（icon.css），使用css sprites管理的图标样式。
3. 自定义通用样式（custom.css），自定义一些页面常用样式以及对常用插件样式的重写，比如：

 1 /* 清除浮动 */
 2 .clear-fixed:after {
 3     content: ‘‘;
 4     display: block;
 5     clear: both;
 6 }
 7 /* 文字超过部分变成... */
 8 .nowrap {
 9     overflow: hidden;
10     white-space: nowrap;
11     text-overflow: ellipsis;
12 }
13 /* 页面导航栏 */
14 .nav {
15     overflow: hidden;
16     white-space: nowrap;
17     text-overflow: ellipsis;
18 }
19 /* 重置弹框插件的默认样式 */
20 .dialog {
21     border: 0;
22     box-shadow: 1px 2px 5px #ccc;
23 }

 

 

 

二、局部通用样式：这类样式仅在部分页面引用，一般根据某些特征来为他们划分，比如：

1. 表单样式（form.css），常出现在编辑页面
2. 插件样式（dialog.css），这类样式一般不会去修改它，但是可以重写覆盖样式。

 

假如一个页面涉及的模块较多，这类样式的文件数量可能很多，但还是有优化的空间。建议对不同样式遵循以下规则：一开始加载便影响到页面外观的样式，建议css文件头部引入。而对于其他可延迟类样式（如弹窗插件的样式），可对其延迟加载，一般是跟随插件异步的引入时引入（依赖引入）。

 

 

三、私有样式：这类样式往往只有一个页面有，很奇葩，而且代码量不会很多，往往连1K都不到，如果把这些样式单独写进一个css文件显得有点浪费，对于这类样式，可以几个页面的样式写在一起。