前端性能優化方案-路由懶加載實現

組件懶加載也叫按需加載；

當打包構建應用時，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')

到此未知就完成了，按需求加載就搞定了，很簡單吧；

歡迎關注博主：微信公眾號