- 01-08 – 缩小CSS和JavaScript文件
第一部分 – 第08章
缩减文件意味着移除代码中不必要的字符内容，从而减少文件大小，就会提升网页的加载速度。
- 当一个文件被缩减时，所有的注释以及不必要的空白（包括换行符，制表符等等）都会被移除。
- 当JavaScript文件或者CSS文件缩减完成时，由于下载文件的大小被减小，移动网站页面就可以更快完成加载。
CSS文件的缩减
一个典型的CSS文件可能看起来与如下内容相似，其间存在大量的空白。
Body
{
background-color:#ffffff;
}
h1
{
color:blue;
text-align:center;
}
在代码中留白使网站开发者的开发过程更为便捷。但是，当代码被发布到网站时，这些留白对于CSS或JavaScript文件便不再是必须的了。
对于以上的CSS文件，你其实可以移除所有不必要的空白。这个CSS文件缩减后的版本将看起来类似如下内容：
body{background-color:#ffffff;}h1{color:blue;text-align:center;}
你可以使用一个免费的在线工具来缩减CSS文件，它叫做Refresh SF。
- refresh-sf.com
JavaScript文件的缩减
文件大小的缩减也能应用至JavaScript文件类型。如下显示的多行JavaScript代码是一个典型的Google Analytics跟踪代码，其间存在大量的空白符和换行符。
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63334315-1', 'auto');
ga('send', 'pageview');
同上，你可以使用Refresh SF工具移除所有不必要的空白并缩减这个JavaScript文件。
- refresh-sf.com
如下是该JavaScript缩减后的版本。
- 该JavaScript代码现在被全部压缩至一行中。
- 其文件大小已被缩减。
!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-63334315-1","auto"),ga("send","pageview");
良好的实践
一个良好的实践就是，总是在两个独立的文件中保存正常未缩减文件的版本以及已删减文件的版本
- 在网站上你实际的移动网站页面，使用CSS或者JavaScript文件的已删减版本
- 当进行JavaScript或者CSS文件的变更时，你应该在未删减版本上进行操作。
例如，你应该给文件的两个版本取不同的名字：
| 文件类型 | CSS文件 | JavaScript文件 |
|---|---|---|
| 正常 | combined.css | combined.js |
| 已缩减 | minify.css | minify.js |
移动网站性能技术白皮书在2017年3月正式出版。
英文版：Minify CSS and JavaScript Files – 繁体中文版：缩小CSS和JavaScript文件
移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International
