縮小束JS和外部庫

我想盡可能減少我網站上的HTTP請求。縮小束JS和外部庫

可以在一個大的縮小文件中縮小所有JS，包括jQuery等外部庫嗎？

2011-10-30 fulmicoton

使用CDN的jQuery – Joe

唯一的原因，爲什麼你要收拾的jQuery你的代碼在一起（而不是使用CDN的）是使用關閉編譯器，以消除jQuery的未使用的代碼，從而導致在一個更小的足跡。如果你沒有使用Closure編譯器，我認爲沒有理由不加載獨立於CDN的jQuery。除了很可能被瀏覽器緩存（從而節省下載）之外，您的代碼下載速度也會更快，因爲這兩種下載都可以同時進行，而如果您使用代碼進行打包，則基本上是從一個源下載的。 –

對於那些確實走這條路線的人來說，要小心謹慎：一起縮小圖書館可能會產生副作用。我遇到了一個今天的情況，其中引用的庫不是「嚴格模式」兼容的。當它與包含''use strict''聲明的其他庫結合使用時會引發問題。 –

是;這非常好，並且很常見。

但是，您可能更願意從Google的CDN加載jQuery，而不是將其包含在捆綁包中。
這爲那些已經擁有Google jQuery的用戶節省了時間。

來源

2011-10-31 00:01:35 SLaks

經常這樣做。要小心，整個開發團隊知道你的js文件是什麼，什麼不是。我無法告訴你，有多少次我看到客戶的網站包含兩個或三個或更多的jQuery實例，有時是因爲有人忘記了它已經在縮小的主文件中。

來源

2011-10-31 00:06:44 dnuttle

我同意在這裏其他的答案，這是好的，但會增加這些方面的考慮：

由於SLaks提到了，我認爲這是最好使用谷歌的CDN jQuery的。 Jquery約爲60k，我相信大多數人都會在谷歌瀏覽器中緩存這些內容。如果你使用這個CDN，你的大部分用戶根本不需要下載。另外，如果您不是從CDN提供服務，您可以獲得CDN的額外收益。
我假設你打算從頭部加載這個單一的JS。這通常是一個壞主意。頭部的JavaScript將阻止身體的負載。您希望將Head中的JavaScript限制爲頁面中其他腳本可能依賴的最小量。這通常包括Jquery。所以，即使它意味着額外的請求，我堅信最好在頂部有一個腳本，腳本包含用於呈現您的主體的依賴關係，然後是包含其他所有內容的第二個更大的腳本。或者甚至更好的腳本在最後創建一個動態創建的腳本標記在頂部，異步加載你的JS的其餘部分。

這裏是網頁腳本的那一端的例子：

<script type="text/javascript"> 

    (function() { 

     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.async = true; 
     script.src = 'http://mysite/js/mybigminifiedandmergedscript.js'; 
     var s = document.getElementsByTagName('script')[0]; 
     s.parentNode.insertBefore(script, s); 
    })(); 

</script>

如果你有很多的腳本，如果在所有未加載不會與你的頁面的用戶體驗造成影響，我會在第三個腳本中加載，就像上面的腳本一樣加載，但延遲到文檔完成後。這樣，該腳本不會干擾頁面的「感知」性能。它靜靜地加載，沒有旋轉的瀏覽器圖標或進度條。
如果您使用.net，我鼓勵您使用我的OSS RequestReduce，它縮小併合並css和javascript以及精靈並優化圖像。無需更改您的代碼。它可用於Nuget和RequestReduce.com。

來源

2011-10-31 03:25:12

這是很多假設:) – fulmicoton

一如既往 - 取決於應用。雖然我同意上述所有觀點，但老式的工程方法會阻礙創建始終與互聯網連接以進行一些優化的依賴性。

我們有需要的jQuery，jQuery UI的，d3js瀏覽器應用程序，其相關的CSS的，當然我們自己的代碼的功能。此外，客戶端需要能夠編輯源HTML來生成變體佈局。

所以我們選擇了一個簡單的「不要碰」的線，所有的魔法js和css都在這裏。我們也選擇不採用CDN方式，因此可以離線編輯html

因此，我們有一個更加強大的解決方案，只需極少的性能價格。

本

來源

2013-08-05 16:13:00 Benno

縮小束JS和外部庫

回答

相關問題