在vue單頁應用中，當專案不斷完善豐富時，即使使用webpack打包，檔案依然是非常大的，影響頁面的載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊，當路由被訪問時才載入對應的元件（也就是按需載入），這樣就更加高效了。——引自vue-router官方文件

如何實現？？

vue非同步元件

vue-router配置路由，使用vue的非同步元件技術，可以實現懶載入，程式碼如下：// 每個元件都會生成一個js檔案

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../view/List.vue';

Vue.use(Router);

export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'list',
    components: resolve => require(['../view/List.vue'], resolve)
  }
],

 

動態import（webpack > 2.4）

vue、webpack官方推薦

情況一：每個元件都會打包生成一個js檔案

const List = () => import('../view/List.vue')

// 在路由配置中什麼都不需要改變，像往常一樣使用元件：
export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'login',
    components: Login
  }，
  {
    path: '/home/user',
    name: 'user',
    components: User
  }
],


 

情況二：所有元件合併打包在一個非同步塊chunk中

const List = () => import(/* webpackChunkName: "home" */ './List.vue')
const User = () => import(/* webpackChunkName: "home" */ './User.vue')

// 在路由配置中什麼都不需要改變，像往常一樣使用元件：
export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'list',
    components: List
  }，
  {
    path: '/home/user',
    name: 'user',
    components: User
  }
],

// 在webpack.base.config.js中配置 ChunkFileName：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},

 

另一種寫法，更簡潔：同樣需要在webpack.base.config.js中配置 ChunkFileName：

{
  path: '/home/list',
  name: 'list',
  component: () => import(/* webpackChunkName:"list"*/ '../view/List.vue')
},
{
  path: '/home/user',
  name: 'user',
  component: () => import(/* webpackChunkName:"user"*/ '../view/User.vue')
},

webpack提供的require.ensure()

語法如下：摘自官網

require.ensure(dependencies: String[], callback: function(require), chunkName: String

多個路由指定相同的chunkName，在這裡chunkName為home，會合並打包成一個js檔案。

{
 path: '/home/list',
 name: 'list',
 // component：list
 component: r => require.ensure([], () => r(require('../view/Lst.vue')), 'home')
},
{
 path: '/home/user',
 name: 'user',
 // component：user
 component: r => require.ensure([], () => r(require('../view/User.vue')), 'home')
}

// 在webpack.base.config.js中配置 ChunkFileName 和 publicPath：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: './',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},

在實踐過程中應該會遇到各種問題，到時候再繼續補充，前端新手，多多指教！

來源：https://segmentfault.com/a/1190000017766798