一、ensure參數(shù)說明？

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

說明: require.ensure在需要的時候才下載依賴的模塊，當(dāng)參數(shù)指定的模塊都下載下來了（下載下來的模塊還沒執(zhí)行），便執(zhí)行參數(shù)指定的回調(diào)函數(shù)。require.ensure會創(chuàng)建一個chunk，且可以指定該chunk的名稱，如果這個chunk名已經(jīng)存在了，則將本次依賴的模塊合并到已經(jīng)存在的chunk中，最后這個chunk在webpack構(gòu)建的時候會單獨(dú)生成一個文件。

語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 
dependencies: 依賴的模塊數(shù)組
callback: 回調(diào)函數(shù)，該函數(shù)調(diào)用時會傳一個require參數(shù)
chunkName: 模塊名，用于構(gòu)建時生成文件時命名使用
例：
 require.ensure([], function() {
        var baidumap = require('../assets/demo.js') //demo.js放在我們當(dāng)前目錄下
 },"clickme")

注意點(diǎn)：requi.ensure的模塊只會被下載下來，不會被執(zhí)行，只有在回調(diào)函數(shù)使用require(模塊名)后，這個模塊才會被執(zhí)行。

上面說了那么多，下面直接來干貨。
二、手寫一個簡單點(diǎn)擊事件
（1）首先創(chuàng)建vue-cli腳手架
安裝完成后在瀏覽器訪問：http://localhost:8080如下圖所示即安裝成功

Index.js代碼：

<template>
  <div>
     <div @click="onClick1">點(diǎn)我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放在我們當(dāng)前目錄下
      },"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",

刷新瀏覽器如下圖所示

點(diǎn)擊：點(diǎn)我1后多個文件js

三、開發(fā)項(xiàng)目時多個路由異步加載如下圖所示

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
    }
  ]
})