?

當(dāng)打包構(gòu)建項(xiàng)目時(shí)，JavaScript?包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。

具體需要 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')

分在同一個(gè)組內(nèi)的組件，當(dāng)請(qǐng)求其中某一個(gè)組件時(shí)，組內(nèi)其它組件也會(huì)同時(shí)請(qǐng)求。

關(guān)于路由懶加載的詳細(xì)文檔，可參考如下鏈接：

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?面板，選擇開發(fā)依賴，輸入?@babel/plugin-syntax-dynamic-import?進(jìn)行安裝

。

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

Javascript

// 項(xiàng)目發(fā)布階段需要用到的 babel 插件 const prodPlugins = [] // 判斷編譯模式為生產(chǎn)環(huán)境 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'] }

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。