vue 之webpack异步加载（代码分割）的原理

一、ensure参数说明？

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

说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 
dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用
例：
 require.ensure([], function() {
        var baidumap = require('../assets/demo.js') //demo.js放在我们当前目录下
 },"clickme")

注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。

上面说了那么多，下面直接来干货。
二、手写一个简单点击事件
（1）首先创建vue-cli脚手架
安装完成后在浏览器访问：http://localhost:8080如下图所示即安装成功

（2）在components目录中创建index.vue、在assets创建demo.js和在根目录下创建main.js

Index.js代码：

<template>
  <div>
     <div @click="onClick1">点我1</div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    onClick1:function(){
      console.log(1);
      require.ensure([], function() {
        var baidumap = require('../assets/demo.js') //demo.js放在我们当前目录下
      },"clickme")
    }
  }
}
</script>

demo.js代码：

console.log("121232");

main.js

import Vue from 'vue'

import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
 router: router,
 render: h => h('router-view'),
 // template: '<App/>'
})

别忘记在配置文件webpack.base.conf.js中加

chunkFilename: "[name].chunk.js",

刷新浏览器如下图所示

点击：点我1后多个文件js

三、开发项目时多个路由异步加载如下图所示

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import App from '../App'
Vue.use(Router)
const Index = r => require.ensure([], () => r(require('@/components/index')), 'index')
const Page1 = r => require.ensure([], () => r(require('@/components/page1')), 'Page1')
const Page2 = r => require.ensure([], () => r(require('@/components/page2')), 'Page2')
const User = r => require.ensure([], () => r(require('@/components/user')), 'User')
const Demovuex = r => require.ensure([], () => r(require('@/components/uemovuex')), 'Demovuex')
const Demovuex1 = r => require.ensure([], () => r(require('@/components/uemovuex1')), 'Demovuex1')
export default new Router({
  routes: [
    {
      path: '/',
      name: 'App',
      component: App,
      children: [

        { path: 'index', name:'index', component: Index },

        { path: 'page1', name:'page1', component: Page1 },

        { path: 'page2/:id', name:'page2', component: Page2 }
      ]
    },{
      path: '/user/:id/ss',
      name: 'user',
      component: User
    },{
      path: '/demovuex',
      name: 'demovuex',
      component: Demovuex
    },{
      path: '/demovuex1',
      name: 'demovuex1',
      component: Demovuex1
    }
  ]
})