縮小CSS和JavaScript文件

第一部分 – 第08章

CSS JavaScript

縮減文件意味著移除代碼中不必要的字符內容，從而減少文件大小，就會提升網頁的加載速度。

  • 當一個文件被縮減時，所有的註釋以及不必要的空白（包括換行符，製表符等等）都會被移除。
  • 當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

Gordon Choi's Mobile Website Book