vue腳本的懶加載

Question

最近我使用 vue 和 laravel 創建了一個管理面板。

一切正常，但一個問題是我編譯的腳本文件幾乎是 7mb 文件（即位於公共文件夾中的 app.js），因為這個編譯的腳本瀏覽器需要很長時間才能在瀏覽器上加載初始（登陸頁面），即在瀏覽器中下載 7mb 腳本之前它不會呈現頁面，這幾乎是 1 分鍾。

是否可以根據用戶單擊加載其他組件在啟動時加載最初的一個組件。

更詳細地說：假設我的 app.js 文件有 1K 行代碼，並且在開始時如果下載了幾行代碼

然后它呈現頁面，即它不應該等待在它呈現頁面之后下載完整的 7mb 腳本。

有沒有辦法減少這個加載時間。 我做了很多谷歌但沒有找到任何解決方案

Answer 1

嘗試使用 es6 動態導入。 vue 文檔中的這個條目和vue-router 中的鏈接可能會對您有所幫助

此外，在我看來，7 mb 的純 JavaScript 代碼是一個非常復雜的 spa。 您確定要縮小代碼並避免捆綁大圖像之類的東西嗎？

既然你使用了 vue-router，我建議你使用 vue-router 文檔中描述的方法，因為它基於 vue 組件的異步加載和 webpack 的代碼拆分特性。

請記住導入 syntax-dynamic-import 插件以避免您上面提到的意外令牌錯誤。