不見的Function Name

在某日時，被指派查看一個Bug，第一步驟當然是打開本地端的開發環境囉~

但神奇的事情發生了，在上線的產品中的Bug卻不能夠照著同樣的步驟reproduce。

當時第一個念頭想的就是，該不會兩者版本不一致吧，但是在經過比較後發現是一致。

於是又仔細看了一次整個邏輯，發現在本地端跑出來的結果的確是我們預期的。

只好在本地端Build出Production環境的檔案，直接用http-server跑起來，賓果!

Bug成功出現，所以接下來比對之後發現Bug是出現使用Function name這個功能。

const a = function test() {
    .....
}
console.log(a.name)
//

在dev環境的時候會如我們預期的印出name(也就是test)，但是在Prod環境的時候

卻發現name變成另一個名字。於是範圍縮小到在Webpack打包的時候。在看過整個

打包流程之後發現最有嫌疑的應該就是uglifyjs這邊，於是查看文檔之後果然看到

有這個選項。

1 2	--keep-fnames Do not mangle/drop function names. Useful for code relying on Function.prototype.name.

在uglifyjs的時候，會把Function的名稱給替換掉，達到壓縮的效果，所以如果

Code裡面有依賴function.name這種用法的時候，記得要確保任何最佳化Js的工

具不會把名稱搞掉。但相對應的，打包過後的體積也會相對應增加一些，所以在

經過取捨之後，最後還是決定把原本的寫法更改，不調整設定了!