5 min read979 words

App 衝突與效能管理

裝 App 很容易，但裝太多 App 會讓你的店鋪變慢、產生衝突、增加維護成本。這一章教你如何有策略地管理你的 App 生態。

App 衝突的常見場景

場景一：兩個 App 修改同一個元素

問題：
App A（彈窗App）修改購物車按鈕的點擊行為
App B（側拉車App）也修改購物車按鈕的點擊行為
結果：
點擊「加入購物車」→ 彈窗和側拉車同時觸發 → 頁面異常

場景二：CSS 樣式衝突

問題：
App A 注入的 CSS：.price { color: red; }
你的主題 CSS：.price { color: black; }
結果：
哪個顯示取決於 CSS 優先級，行為不可預測

場景三：JavaScript 錯誤傳播

問題：
一個 App 的 JavaScript 出錯
錯誤沒有被正確捕獲
結果：
整個頁面的其他 JavaScript 停止執行
← 購物車無法添加、動畫不運行

診斷 App 衝突

方法一：逐一停用法

懷疑有衝突時： 1. 記錄問題現象 2. 停用所有 App 3. 逐一重新啟用 4. 在每次啟用後測試問題是否重現 5. 找到觸發問題的 App

重要： 停用 App 和卸載 App 不同。停用只是關閉功能，代碼可能仍然存在。

方法二：瀏覽器控制台診斷

打開瀏覽器的開發者工具（F12）→ Console： - 紅色的 Error 訊息通常是問題根源 - 查看錯誤信息中包含哪個 App 的文件名稱

方法三：主題檢查器

路徑： 主題 → 選擇主題 → 操作 → 查看代碼

搜索被停用但可能遺留代碼的 App 相關字符串：

搜索：app-name（已停用 App 的名稱）
如果找到代碼 → 手動清除遺留代碼

App 性能影響

量化 App 對速度的影響

每個 App 通常會在頁面添加： - 一個或多個 JavaScript 文件（50KB–500KB） - CSS 文件（10KB–100KB） - 額外的 HTTP 請求（增加網絡延遲）

測量工具： 1. 打開 PageSpeed Insights 2. 測試你的店鋪 URL 3. 在「移除未使用的 JavaScript」部分可以看到哪些 App 在拖慢頁面

Shopify 速度評分

路徑： 主題 → 速度

Shopify 提供的速度評分會顯示和行業中位值的對比。目標：保持在行業中位值或以上。

App 生命週期管理

安裝 App 前的檢查清單

□ 這個 App 是否解決了現有問題？（不裝不行嗎？）
□ 有沒有免費替代方案或 Shopify 內建功能？
□ App 評價 > 4.5 且評價數量 > 100？
□ 最後一次更新是否在 6 個月內？
□ 開發者是否提供技術支持？
□ 費用是否在預算內？

卸載 App 的正確步驟

卸載 App 時，有些 App 會在主題中留下代碼（「遺留代碼問題」）：

在 App 設置中查找「主題代碼」或「移除主題代碼」選項
先在 App 內清理主題代碼
再從 Shopify 後台卸載 App
卸載後：在主題代碼中搜索 App 名稱，手動刪除任何遺留片段

季度 App 審查

每季度做一次 App 審計：

問題	行動
這個 App 最近 30 天真的有被用嗎？	沒用 → 卸載
兩個 App 的功能是否有重疊？	選一個，卸載另一個
這個 App 的費用是否值得？	不值得 → 找免費替代或卸載
有沒有 Shopify 內建功能可以取代？	有 → 用內建功能，卸載 App

你在找的功能	先確認主題是否內建
快速瀏覽（Quick View）	Dawn 等主題已內建
無限滾動	部分主題支持
產品比較	部分主題支持
社交分享按鈕	多數主題已內建

需求	Shopify 原生	第三方 App
廢棄購物車 Email	設置 → 通知（免費）	Klaviyo（更強大但月費）
商品評價	暫無，需要 App	Judge.me
折扣碼	行銷 → 折扣（免費）	第三方 App
Email 行銷	Shopify Email（免費）	Klaviyo（更強大）

本章執行清單

[ ] 用 PageSpeed Insights 測試你的店鋪，查看有哪些 App 在拖慢速度
[ ] 列出所有已安裝的 App，評估每個是否真的在使用
[ ] 卸載過去 30 天沒有用到的 App
[ ] 確認卸載 App 後主題代碼中沒有遺留片段
[ ] 設置每季度一次的 App 審查提醒

下一節：自定義 App 與 API 入門——當現有 App 無法滿足你的需求時該怎麼辦。