vue路由组件按需加载的几种方法小结
1. 普通加载
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如:
import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl'
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题,需要将他分成多个小文件,而且还要实现异步按需加载,即用到了再加载,而不用一股脑全部加载
2. webpack的require.ensure()实现按需加载
语法:require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
- dependencies:字符串构成的数组,声明 callback 回调函数中所需的所有模块,模块作为依赖被加载
- callback:只要加载好全部依赖,webpack 就会执行此函数。require 函数的实现,作为参数传入此函数。当程序运行需要依赖时,可以使用 require() 来加载依赖。函数体可以使用此参数,来进一步执行 require() 模块。
- errorCallback:当 webpack 加载依赖失败时,会执行此函数。
- chunkName:由 require.ensure() 创建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用,我们可以将它们的代码合并到一个单独的 chunk 中,从而只产生一个浏览器必须加载的 bundle。
使用方法一:
require.ensure([], function(require){ require('./a.js'); }); // 此时会单独打包出一个js文件,没有自定义名称的话,会被命名为1.js(有hash时候会带上md5)
使用方法二:
require.ensure(['./a.js'], function(require) { require('./b.js'); });
1、此时a.js作为依赖被加载,但是没有被执行(官方文档说的only loads the modules)
2、a.js和b.js会被打包成一个文件。
3、回调函数里只require了b.js,只有b.js的内容会被执行。
4、如果你需要使用a.js的内容,需要再加上require('./a.js')
require.ensure(['./list'], function(require){ var list = require('./list'); list.show(); });
给require.ensure的第一个参数传了['./list'],执行到这里的时候list.js会被浏览器下载下来,但是并不会执行list.js模块中的代码,也就是webpack官网说的,不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。
写在函数中的多个模块会被打包在一起,这一点和上面没有区别。另外,写在数组中的模块也会跟他们打包在一起,不管你有没有手动执行。
vue中使用
comst List = resolve => { require.ensure([],() => { resolve(require('./list')) },'list') }
其实resolve的作用就是Promise里面那个resolve,在这里就是定义一个异步的组件
使用动态 import语法
const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue'); const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) // /* webpackChunkName: "foo" */使用命名chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4) // webpack要加配置 output需要加个chunkFilename chunkFilename: '[name].js'
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。