5個貪婪的任務，可以改善您網站的性能

鍵突出顯示：

通過自動化的過程（如壓縮和縮小）來簡化網站的優化。 基本任務包括用於圖像壓縮的

>，用於JavaScript縮小的
• >grunt-contrib-imagemingrunt-contrib-uglify>用於CSS壓縮。 grunt-contrib-cssmin
Other valuable Grunt tasks are
• , which removes unused CSS, and grunt-uncss, which minifies HTML. 儘管HTML的降低可能只會產生較小的文件尺寸減少，但每個優化都需要提高Web性能。 grunt-contrib-htmlmin。
這些用戶友好的咕unt任務可以通過加速網站加載時間來大大提高用戶體驗。 他們無縫集成在您的工作流程中提高了效率和有效性。
• 在當今的數字景觀中，網站性能至關重要。 如先前的SitePoint文章（例如，“資源定時API簡介”，“發現用戶定時API”，以及Craig Buckler的“減少頁面重量的完整指南”），理解和解決性能瓶頸是至關重要的。 像Grunt和Gulp這樣的任務跑步者可以自動化許多手動優化任務，從而改善您的工作流程。本文詳細介紹了增強網頁性能的五項咕unt任務。

圖像是網站大小的主要貢獻者。 httparchive.org的統計數據揭示圖像通常佔頁面總數的63％以上。 通常，圖像不會最佳地壓縮。 grunt-contrib-imagemin通過為公共圖像格式提供優化器來解決此問題：

grunt-contrib-imagemin（gif）

• （JPEG） gifsicle
（png）
• jpegtran（SVG）
• optipng這是一個示例配置：
• svgo此配置使用
（0-7，默認3），以在

>中對PNG，JPG和GIF映像進行積極優化，輸出到

>。

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

optimizationLevel: 5 src/images dist/

>縮小JavaScript代碼。它刪除空格並縮短變量/功能名稱。 有用的選項包括

（用於調試）和（用於添加元數據）。 grunt-contrib-uglify考慮此JavaScript：

降低將其轉換為：grunt-contrib-uglify sourceMap banner配置示例：

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};

>壓縮CSS文件，類似於

uglify: {
   dist: {
      options: {
         sourceMap: true,
         banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
      },
      files: {
         'dest/output.min.js': ['src/input.js'],
      }
   }
}

，提供了

>選項。 簡單的配置：

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

這將在src/css中減小所有CSS，並輸出到dist/css/style.min.css>。

grunt-uncss

>刪除未使用的CSS，減少文件大小。 當使用Bootstrap或Foundation等框架時，這特別有益。 grunt-uncss（用於排除選擇器）和ignore（用於忽略樣式表）之類的選項可用。 示例：ignoreSheets

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

grunt-contrib-htmlmin

>

>縮小HTML，提供適度的尺寸減小。 雖然影響可能很小，尤其是在GZIP壓縮的情況下，但每一個都會有所幫助。 配置：grunt-contrib-htmlmin

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};

這將處理

>中的所有HTML文件，刪除評論和崩潰的空格，然後輸出到srcdist/結論

這五項艱鉅的任務提供了直接的方法來顯著提高網站性能。 它們的易用性使它們成為增強用戶體驗的寶貴工具。 您是否使用過這些任務？ 分享您的經驗和最喜歡的怪異任務！ 下面提供了有關咕unt和網站性能的全面常見問題解答部分。 > （FAQ部分將在此處遵循，反映了原始FAQ的結構和內容，但要改寫以獲得更好的流動和簡潔。）

以上是5個貪婪的任務，可以改善您網站的性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！