feat: loadable component

[mark86092]

Close #

這個 PR 是？

等公司資料合併上線後再來 merge

將比較大包的 js 拆分成小包，僅當需要使用的時候才讀取

  460.38 KB (+141.91 KB)  build/public/static/js/bundle.2634ec13.js
  27.15 KB                build/public/static/css/bundle.2634ec13.css
  114 B                   build/chunks.json

PR 改動：

  318.47 KB (+2 B)  build/public/static/js/bundle.85b12935.js                                                           
  134.66 KB         build/public/static/js/0.ab8bda49.chunk.js                                                          
  27.15 KB          build/public/static/css/bundle.85b12935.css
  1.12 KB           build/public/static/js/1.b04cdc02.chunk.js                                         
  178 B             build/chunks.json

背景知識

這個套件是透過 https://loadable-components.com/ 來達成 dynamic import

新版的 react 應該會支援更好，但我們還沒升級

我應該從何看起？

請見 comment

我應該如何手動測試？

setup: npm run build, npm run start-production (目的是看 build 後的 request)

• 檢查以下網頁是否正常運作
  • http://localhost:3000/
  • http://localhost:3000/companies/TSMC
  • 單篇經驗頁
• 檢查一般頁面是否不讀取上述的 0.ab8bda49.chunk.js, 1.b04cdc02.chunk.js (我的測試見附錄1)

附錄1

拜訪 http://localhost:3000/companies

可以發現只讀取 bundle.85b12935.js

[mark86092]

這個檔案原本取名拼字有錯

[mark86092]

原拼字有誤，修正 naming