Code Splittingメモ - のぐそんブログ

Code Splitting

Vue cliでプロジェクトを作成した場合にrouter.jsのcode-splittingの記述が気になったので調べてみた。

  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      //component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },

Code Splittingとは

コードを分割して非同期で読み込む仕組み。
初期表示に不要なファイルはバンドルファイルに含めないようにする為、初期表示のレンダリングをブロックしないようになります。

Code Splittingしない場合

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Kobito.qjCwu4.png

Kobito.R9DkEG.png

全てのファイルが、app.jsにバンドルされて読み込まれる。

Code Splittingした場合

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import("./views/Home.vue")
const About = () => import("./views/About.vue")

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Kobito.OoAFlW.png

Kobito.rNcDau.png

分割したファイルが0.js、1.jsが非同期で読み込まれる。

ChunkNameをつけてみる

import Vue from 'vue'
import Router from 'vue-router'

const Home = () => import(/* webpackChunkName: "home" */ "./views/Home.vue")
const About = () => import(/* webpackChunkName: "about" */ "./views/About.vue")

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Kobito.nVOM6V.png