作者heavenbetula (綠草)
看板Web_Design
標題[問題] Webpack-dev-server開發時的速度
時間Sat Sep 28 15:45:36 2019
最近專案用React搭配Webpack的方式在寫
遇到一個想不透的問題所以想請教一下
就是我在開發時跑 webpack-dev-server，然後我畫面有個table
按下排序的按鈕時執行排序
由於資料量大概有200筆
起初我以為是資料太多才會在按下按鈕時會lag個一秒才排完(因為10筆、20筆都很快)
但是我將同樣的程式build出來後，放在IIS的80port去試
結果200筆是瞬間飛快的排序完成
所以感覺不是資料量太多的問題吧...
有另位工程師跟我說是webpack在執行任何操作的時候都會編譯才會慢
可是我覺得他說的應該是hot reload這塊，我有改資料那麼需要編譯，慢能理解
但我現在是webpack已經編譯完，都用webpack-dev-server跑起來了
這時候我在頁面上的操作應該是無關編譯的事了，也無關hot reload了呀
想不透為什麼在webpack-dev-server跟實際在IIS 上跑速度可以差那麼多！
請問有人知道這是為什麼嗎～感謝？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.70.222.22 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1569656738.A.E46.html
1F：→ dododavid006: webpack-dev-server 會在相關的檔案被改動時重編沒 09/29 11:31
2F：→ dododavid006: 錯，只是資料應該不是用 import 的方式加進來的吧？ 09/29 11:32
3F：→ dododavid006: 如果懷疑是 webpack 的問題開一下 devtool 看 09/29 11:32
4F：→ dododavid006: network 的部份有沒有載一個新的 js 下來 09/29 11:32
資料的部分是直接去fetch api的資料
至於您說的看network的部分，載一個新js這個我有點看不懂...
network的部分有去跑要拿的api這部分沒問題
我並不是每次點擊按鈕才去呼叫api，而是頁面一載入就去呼叫了
點擊按鈕單純只做排序而已
※ 編輯: heavenbetula (219.70.222.22 臺灣), 09/29/2019 15:30:20
5F：推 sa0124: 排序的table item有那些東西啊？裡面有要排序圖片什麼的 09/29 17:11
6F：→ sa0124: 嗎？prod的js是優化壓縮過的， dev的js沒有優化壓縮 所以j 09/29 17:11
7F：→ sa0124: s兩邊跑起來的確表現不同 但我以前經驗上是也不會差到太多 09/29 17:11
8F：→ sa0124: 除非又有圖片什麼的 09/29 17:11
恩我也覺得壓縮過的跟沒壓縮前應該是不會差的那麼誇張
排序的項目單純就是純文字+小到不行的icon(而且這ICON還是共用同一張而已)
所以現在我還是不知道為什麼dev跟prod會差那麼誇張...
※ 編輯: heavenbetula (219.70.222.22 臺灣), 09/30/2019 13:51:03
9F：→ lucifiel0121: 你的build是 dev 還是 prod, 確認看看484一樣吧 10/10 09:24
確認是不一樣的喔
※ 編輯: heavenbetula (219.70.222.22 臺灣), 10/26/2019 20:09:58