vue路由组件按需加载的几种方法小结

发布时间：2020-12-17 02:57:17 所属栏目：百科来源：网络整理

导读：1. 普通加载使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他

1. 普通加载

使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

这样做的结果就是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。

使用方法一：

使用方法二：

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']，执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，也就是webpack官网说的，不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。

写在函数中的多个模块会被打包在一起，这一点和上面没有区别。另外，写在数组中的模块也会跟他们打包在一起，不管你有没有手动执行。

vue中使用

{ require.ensure([],() => { resolve(require('./list')) },'list') }

其实resolve的作用就是Promise里面那个resolve，在这里就是定义一个异步的组件

使用动态 import语法

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'

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!