react.lazy 路由懶加載_7.8 vue-router實作路由懶加載(動态加載路由),新增chunkFilename...

問題：vue-router實作動态加載路由元件( 懶加載 )

當打包建構應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的元件分割成不同的代碼塊，然後當路由被通路的時候才加載對應元件，這樣就更加高效了。

結合 Vue 的異步元件和 Webpack 的代碼分割功能，輕松實作路由元件的懶加載。

第一步：定義一個能夠被 Webpack 自動代碼分割的異步元件。

// 在src/router/index.js裡面引入異步引入元件const index = () => import('../page/list/index.vue');
           

第二步：在路由配置中什麼都不需要改變，隻需要像往常一樣使用 index。

const router = new VueRouter({ routes: [ { path: '/index', component: index,name:"index" } ]})
           

第三步：在build/webpack.base.conf.js下的output屬性，新增chunkFilename。

output: { path: config.build.assetsRoot, filename: '[name].js', //新增chunFilename屬性 chunkFilename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath },
           

編輯器：