Terser 是一個壓縮JavaScript的工具, Terser 也能處理如 CoffeeScript、TypeScript 和 Babel 等 JavaScript 編譯輸出的腳本, 因此可以利用此工具加入至Magento2的部屬流程來達到提升效能的目的。

從這篇文章你會知道：

• 壓縮工具的比較
• 將 Terser 應用在 Magento2

壓縮工具的比較

Magento2原本就有在Production mode整合, 可以壓縮JavaScript的minify JS的工具, 但Terser壓縮的效能比原生提供minify JS更為優異, 以下為筆者實際測試Magento2.4.5開源版luma theme的結果：

版本: Magento2.4.5 開源版, 效能檢測工具: Lighthouse, 分數皆效能檢測三次之平均

裝置: 桌上型電腦

壓縮工具/頁面	首頁	目錄頁	產品頁
Terser	100	96.7	92
Magento Minify js	99	97	90.6
無使用	99.3	95.6	89

裝置: 手機

壓縮工具/頁面	首頁	目錄頁	產品頁
Terser	74	72.3	62.6
Magento Minify js	72.6	67.6	57
無使用	57.6	60	51

將 Terser 應用在 Magento2

在Magento2的架構下, 我們可以應用在Magento2 生產模式執行setup:static-content:deploy靜態檔案部屬後, 對靜態檔案資料裡的檔案進行壓縮, 來達到提高Magento2效能。

首先需要從npm管理工具安裝Terser:

$ npm install terser -g

安裝完成後, 查看安裝的版本:

$ node -v
v14.20.1
$ npm install terser -g
changed 12 packages, and audited 13 packages in 887ms
found 0 vulnerabilities

接著需要知道terser的安裝路徑, 後面進行壓縮的指令需要用到:

$ whereis terser
terser: /usr/bin/terser

再來要將靜態檔案位置綁定好, 筆者會先以預設的luma theme為例, 指令為下:

$ THEME_FOLDER=('/var/www/html/m245/src/pub/static/frontend/Magento/luma/en_US');

最後我們將執行以下指令來進行壓縮:

$ find ${THEME_FOLDER[@]} \( -name '*.js' -not -name '*.min.js' -not -name 'requirejs-bundle-config.js' \) 
-exec /usr/bin/terser \{} -c -m reserved=['$','jQuery','define','require','exports'] -o \{} \;

而壓縮的指令 ‘-exec /usr/bin/terser’這段是根據你terser安裝的路徑來帶入, 也是上面使用 ‘whereis terser’ 所輸出的路徑

最後清除Magento2的快取就大功告成了!!

以下附上lighthouse壓縮前後的手機裝置效能結果

壓縮前:

壓縮後:

參考資料來源：

https://docs.webscale.com/stratus-guides/magento-2/using-terser/

---

以上為 使用Terser提高Magento2 JS效能 的分享

訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。