天天看點

magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)

名稱:   lesti::merge(smart merging of js and css)

extension key:http://connect20.magentocommerce.com/community/lesti_merge

網址:    http://www.magentocommerce.com/magento-connect/lesti-merge-2265.html

介紹:   基于magento原生的合并js和css功能,提供更聰明更智能的js和css合并方案,可以根據 layout-handle自動給需要合并的js和css分組,以原生1.7.0.2為例,啟用原生的合并js設定後,進入商品詳情頁,加載的是一個大小465kb的合并後的js

magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)
magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)
magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)

而如果同時打開插件提供的智能合并設定,商品詳情頁,加載的是兩個合并後的js,兩個加起來的大小是465kb

magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)
magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)
magento -- 推薦插件 -- 智能版Js和Css合并 --Lesti::Merge(Smart Merging of Js and Css)

差別在于,第一種情況,因為商品清單頁和詳情頁頭部加載的外置js不同,根據原生合并的原理,需要各自生成一個合并後的js檔案,也就是說,從清單頁進入詳情頁,這個465kb的js檔案需要重新加載。第二種情況,雖然表面上看起來需要加載兩個js檔案,多了一次請求數,但因為通過智能合并,會發現360kb的那個js跟清單頁使用的合并後js是同一個,也就是說在使用者從清單頁進入詳情頁時,浏覽器已經緩存過了這個360kb的js檔案,詳情頁需要重新加載的隻有那個105kb的js檔案,事實上的效率要高于第一種情況。

更詳細的分析見上一篇部落格

:why you shouldn't merge javascript in magento

繼續閱讀