vue构建多页面spa的路由配置之一:不得不用的require.ensure

不得不用的require.ensure

在我们做一些小demo的时候,一共就几个小页面,我们一般就一次性直接加载完就ok了。但是,在页面很多的的spa中,或者有比较大的但又不是立刻必要的js时,我们就希望将它分割开来,并且可以懒加载。这时候就要用 webpack的 require.ensure了。

使用require.ensure可以达到的目的有两个,第一个是把依赖的文件从主文件分离出去,第二个是可以达到懒加载的效果。上代码:

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
这里有三个参数,第一个数组,是依赖的模块,就好像你要加载一个layer,之前要依赖于jquery一个意思。第二个是回调函数,里面写需要加载的模块及要执行的函数。第三个参数是,单独打包的chunk
的名字。

下面来个小demo测试一下懒加载

<template>
  <div id="test">
    <div id="abtn" @click="aclick">aaa</div>
    <div id="bbtn" @click="bclick">bbb</div>
  </div>
</template>
<script>
export default{
    methods:{
        aclick(){
          require.ensure([],function () {
            var awork = require('./aaa')
          },'aaa')
        },
      bclick(){
        require.ensure([],function () {
          var awork = require('./bbb')
        })
      }
    }
}
</script>
点击aaa 和bbb

点击的时候加载。但是点击第二次的时候,已经加载过的就不会再加载第二次了。

随机浏览