大家好，我是奶綠。
記錄一下為何將 vite 換回 webpack。
其實問題不是 vite 的錯，請大家不要擔心。
公司的電商平台選用 shopify，所有的 js,css 檔都需要使用 shopify 提供的 liquid 語法載入 js，平台會自動將檔案上傳到他們的 CDN 主機上
<script type="module" src="{{ 'app.min.js' | asset_url }}"></script>經過編譯後會得到像這樣的路徑
<script type="module" src="//www.positivegrid.com/cdn/shop/t/386/assets/app.min.js?v=40234525283226099171698650715"></script>編譯後檔案路徑有加個 ?v= 版本號
但因為使用 vite 會使用原生的 esmodule 載入，路徑就無法帶版本號，就有一定的機率因為 CDN 主題 cache 的問題，載到舊的檔案，然後就爆掉了。
嘗試解法1：
使用 vite vite-plugin-filter-replace
在 build 完靜態檔後，強制在每個 import xx from ‘vue’ 加上 ? timestamp。
import vue from 'vue?t=1122334455667788'看起來可以解決，但就在有一次美國同事說網站爆了，但我怎麼看都是正確的，結果一用 vpn 跨過去，還真的爆了，呼，看來加上 timestamp 也是有機會失敗。
嘗試解法2：
要拿到正確的版本號，就一定要用 liquid 提供的 {{ asset_url }} 語法。還好有個 importmap 可以使用，看起來可以完美解，But，Browser 支援度太低了，只好放棄。
嘗試解法3：
這己經不是 RD 能處理的問題，只能和 shopify 官方 Support 連絡，經過了幾次來回，最終他們也說超出他們的服務範圍了，想想也合理，他們也是使用別人的 CDN 主機服務。
沒辦法，只能換回 webpack，當然如果用 JS dynamic 載入另一隻 js 也是會遇到這個 CDN cache 的問題。