記錄一次前端參考前端本地JSON檔案的問題（從運行到打包）：
我們大概的需求是這樣的：
一個很大的json檔案（應該是20m大小左右），如果通過后臺介面訪問的話，請求時間過長，用戶體驗很差，
因為這個json資料不會做輕易的改變，所以最后和后端商量把json放在前端專案里，
開始：
開始的思路很簡單，將json檔案放入前端專案檔案夾assets
使用時采用 import 引入
運行專案之后發現沒有什么問題，打包之后發現了問題，
問題：
這里打包之后，發現index.js這個檔案的達到了 20多兆，放在nginx服務器上，在nginx配置上添加了Gzip壓縮，
打開專案，發現壓縮后的index.js還是有9.8兆（坑爹啊～～～）
所以換個思路來解決，
新的方案：
查閱了一些網上大佬的檔案，現在發現在react中使用import 引入 json時，打包會自動把json打包進js里面，所以決定不使用import，
后來想到使用ajax訪問前端本地檔案，
這里是采用的我們封裝的axios，具體網上都有，
寫成這樣之后，采用介面呼叫
拿到了回傳資料，然后打包，
在打包時需要注意！
webpack打包配置時，需要將json單獨打包，to的路徑需要看你nginx里面的檔案目錄，
至此將前端檔案dist 放在 nginx服務器上，打開專案查看成果，
20多MB的json經過Gzip壓縮之后還有7.5MB
效果還可以～
但是終究還不是最終解決方案，后面只能同后端來修改這個json的大小，看看能不能精簡一些，
如果大佬有更好的解決方案 歡迎討論
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/293560.html
標籤：其他