Vue 路由&組件懶加載（按需加載）

當打包構建應用時，Javascript 包會變得非常大，影響頁面加載速度。使用Vue路由懶加載和組件懶加載可以提升頁面加載速度，減少白屏時間，提升用戶體驗。

用法有如下三種：（路由懶加載與組件懶加載用法相同）

1. Vue異步組件技術

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
　　routes:[{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:resolve=>(require(["@/components/Home"],resolve))
　　　　}]

})

 

2.ES提案的import()方法  🌟推薦使用此方法

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Home = () => import("@/components/Home");
export default new Router({
　　routes:[
　　　　{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:Home
　　　　}
　　]
})

把組件按組分塊：

有時候我們想把某個路由下的所有組件都打包在同個異步塊(chunk)中，只需要使用命名chunk，一個特殊的注釋語法來提供chunk name(需要Webpack > 2.4)

const Foo = () => import(/* webpackChunkName: 'group-foo' */ './Foo') 
const Bar = () => import(/* webpackChunkName: 'group-foo' */ './Bar') 
const Baz = () => import(/* webpackChunkName: 'group-foo' */ './Baz') 

注意：chunk name一定要加引號(單引號雙引號都可以)否則webpack不能識別chunk name,會默認按[id]顯示，打出來的包的名字會是 0.js,1.js……

以上3行代碼指定了相同的webpackChunkName，會合並打包成一個js文件，組件按組分塊。

同時我們需要手動配置webpack.base.conf.js，output增加一行chunkFilename

module.exports = {
  // JS 執行入口文件
  entry: {
    main: './main.js',
  },
  output: {
    // 為從 entry 中配置生成的 Chunk 配置輸出文件的名稱
    filename: '[name].js',
    // 為動態加載的 Chunk 配置輸出文件的名稱
    chunkFilename: '[name].js',
  }
};

 3.webpack官方推薦

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

//r 就是resolve。 同時指定了chunk name為"group"，會打包到一個js文件中，按組分塊
const Home = r => require.ensure([],() => r(require("@/components/Home")),'group');  
const About = r => require.ensure([],() => r(require("@/components/About")),'group');

export default new Router({
　　routes:[
　　　　{
　　　　　　path:'/';
　　　　　　name:'home',
　　　　　　component:Home
　　　　},

　　　　{
　　　　　　path:'/about'; 　　　　　　name:'about', 　　　　　　component:About 　　　　}

　　] })