?

當打包構建項目時，JavaScript?包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。

具體需要 3 步：

• 安裝?@babel/plugin-syntax-dynamic-import包。
• 在?babel.config.js?配置文件中聲明該插件。
• 將路由改為按需加載的形式，示例代碼如下：

Javascript

// /* webpackChunkName: "group-foo" */表示路由分組 // './Foo.vue' 表示路由存放路徑 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

分在同一個組內的組件，當請求其中某一個組件時，組內其它組件也會同時請求。

關于路由懶加載的詳細文檔，可參考如下鏈接：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

@babel/plugin-syntax-dynamic-import 插件介紹傳送門

npm

Javascript

npm install --save-dev @babel/plugin-syntax-dynamic-import

打開?vue-ui?面板，選擇開發依賴，輸入?@babel/plugin-syntax-dynamic-import?進行安裝

。

然后打開?babel.config.js?文件，在?plugins?數組內添加我們安裝的依賴:?'@babel/plugin-syntax-dynamic-import'，具體位置見下文所示：

Javascript

// 項目發布階段需要用到的 babel 插件 const prodPlugins = [] // 判斷編譯模式為生產環境 if (process.env.NODE_ENV === 'production') {prodPlugins.push('transform-remove-console') }module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['component',{libraryName: 'element-ui',styleLibraryName: 'theme-chalk'}],...prodPlugins,'@babel/plugin-syntax-dynamic-import'] }

最后，將每一個組件更改為懶加載的形式：

總結

以上是生活随笔為你收集整理的前端学习（2742）：重读vue电商网站52之路由懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。