前端開發目前在市場上的需求變的越來越重要
元件懶載入也叫按需載入；
當打包構建應用時，JavaScript 包會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了。
打包 build 後的 dist 中 js 包檔案太大，影響頁面載入速度，使用 vue 的非同步元件和 webpack 的程式碼分割功能，實現路由元件的懶載入；
下面透過 vue 的非同步載入和 webpack 來實現元件懶載入；
先看例子不使用路由懶載入的情況：
import Vue from ‘vue’；import Router from ‘vue-router’；import HelloWorld from ‘@/components/HelloWorld’；import Login from ‘@/components/Login’；Vue。use（Router）；export default new Router（{ routes： ［ { path： ‘/’， name： ‘HelloWorld’， component： HelloWorld }， { path： ‘/login’， name： ‘Login’， component： Login } ］}）；
加上按需載入後：
import Vue from ‘vue’；import Router from ‘vue-router’；// import HelloWorld from ‘@/components/HelloWorld’；// import Login from ‘@/components/Login’；Vue。use（Router）；export default new Router（{ routes： ［ { path： ‘/’， name： ‘HelloWorld’， component： （） => import（/* webpackCunkName： “HelloWorld” */ ‘@/components/HelloWorld’） }， { path： ‘/login’， name： ‘Login’， component： （） => import（/* webpackCunkName： “Login” */ ‘@/components/Login’） } ］}）；
按需載入的核心程式碼就是這一段，vue和react框架都能這樣使用；這個能力不是vue框架提供的，而是 webpack 提供的，需要 webpack 的版本在 2。4 以上；
（） => import（/* webpackCunkName： “HelloWorld” */ ‘@/components/HelloWorld’）
到此未知就完成了，按需求載入就搞定了，很簡單吧；
