菜单

vue路由组件按需加载的几种方法小结_vue,js_脚本之家

2020年3月26日 - 新闻中心

澳门太阳集团,vue-cli是由vue官方揭橥的登时创设vue单页面的脚手架。

1. 平淡无奇加载

应用 vue-cli创设的品种,在 暗许情形下 ,实施 npm run build
会将具有的js代码打包为一个全部,

动用vue-cli营造项目后,大家会在Router文件夹下边包车型的士index.js里面引进相关的路由组件,如:

包裹地点是 dist/static/js/app.[contenthash].js

import Hello from '@/components/Hello'import Boy from '@/components/Boy'import Girl from '@/components/Girl'

router/index.js 路由有关消息,该路由文件引进了五个 .vue组件

那般做的结果就是webpack在npm run
build的时候会打包成三个总体的js文件,如若页面一多,会招致这一个文件丰盛大,加载缓慢,为了缓和这些难点,须要将他分成多少个小文件,况兼还要落实异步按需加载,即用到了再加载,而不用一股脑全部加载

import Hello from '@/components/Hello'import Province from '@/components/Province'import Segment from '@/components/Segment'import User from '@/components/User'import Loading from '@/components/Loading'

2. webpack的require.ensure(卡塔尔(قطر‎完结按需加载

实行 npm run build 会打包为叁个完好 app.[contenthash].js
,那么些文件是丰硕大,大概几兆或然几十兆,加载会非常慢

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

vue路由组件按需加载的几种方法小结_vue,js_脚本之家。就此大家要求分模块打包,把大家想要组合在合作的零构件封装到叁个chunk块中去,分模块打包需求上边那样使用 webpack的
require.ensure,并且在终极步入一个 chunk名,相像chunk名字的模块将会卷入到一块儿。

dependencies:字符串构成的数组,申明 callback
回调函数中所需的兼具模块,模块作为依附被加载
callback:只要加载好一切依附,webpack 就能实施此函数。require
函数的兑现,作为参数字传送入此函数。当程序运行要求依据时,可以利用 require()来加载信任。函数体能够采取此参数,来一发实施 require(卡塔尔(قطر‎ 模块。
errorCallback:当 webpack 加载重视失利时,会实行此函数。 chunkName:由
require.ensure(State of Qatar 创造出的 chunk 的名字。通过将同叁个 chunkName
传递给差异的 require.ensure(卡塔尔 调用,我们能够将它们的代码合并到叁个独自的
chunk 中,进而只爆发二个浏览器必需加载的 bundle。

webpack中采用require.ensure(卡塔尔国完结按需加载

require.ensure{ require;// 此时会单独打包出一个js文件,没有自定义名称的话,会被命名为1.js

require.ensure(['./a.js'], function { require;

1、require.ensure()

1、这个时候a.js作为依赖被加载,可是从未被实行(官方文书档案说的only loads the
modules)2、a.js和b.js会被打包成三个文书。3、回调函数里只require了b.js,独有b.js的内容会被实行。4、即便你要求利用a.js的剧情,供给再加上require

webpack 在编写翻译时,会静态地解析代码中的
require.ensure(State of Qatar,同一时间将模块增多到二个分离的 chunk 当中。那个新的 chunk
会被 webpack 通过 jsonp 来按需加载。

require.ensure(['./list'], function{ var list = require; list.show;
require.ensure(dependencies: String[], callback: function, chunkName: String)

给require.ensure的首先个参数字传送了[‘./list’],试行到那边的时候list.js会被浏览器下载下来,不过并不会实践list.js模块中的代码,约等于webpack官方网址说的,不交易会开evaluate。真正张开evaluate的时候是到了前边那句var
list = require;这就是所谓的懒施行。

依赖 dependencies

写在函数中的三个模块会被打包在一齐,那点和方面未有区分。别的,写在数组中的模块也会跟她们包裹在一块,不管您有没有手动施行。

那是二个字符串数组,通过这么些参数,在全体的回调函数的代码被实施前,大家得以将有着需求使用的模块进行宣示。

vue中使用

回调 callback

comst List = resolve => { require.ensure => { resolve },'list')}

当有着的信赖都加载成功后,webpack会实践那个回调函数。require
对象的贰个贯彻会作为一个参数字传送递给这一个回调函数。因而,大家能够更进一竿require(卡塔尔 正视和任何模块提供下一步的实施。

实则resolve的效果正是Promise里面特别resolve,在此正是概念叁个异步的零器件

chunk名称 chunkName

行使动态 import语法

chunkName 是提必要这么些一定的 require.ensure(卡塔尔国 的 chunk 的称号。通过提供
require.ensure()分歧实施点相似的称呼,大家得以确定保证全部的信任性都会合营放进相仿的 文件束。

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ]})// /* webpackChunkName: "foo" */使用命名chunk,一个特殊的注释语法来提供 chunk name // webpack要加配置 output需要加个chunkFilenamechunkFilename: '[name].js'
\ file structure | js --| | |-- entry.js | |-- a.js | |-- b.js webpack.config.js | dist

\ entry.jsrequire;require.ensure{ require;

\ a.jsconsole.log;

\ b.jsconsole.log;

\ webpack.config.jsvar path = require;module.exports = function { return { entry: './js/entry.js', output: { filename: 'bundle.js', path: path.resolve } }}

以上正是本文的全体内容,希望对大家的学习抱有利于,也愿意大家多都赐教脚本之家。

经超过实际践这一个类型的 webpack 构建,大家发现 webpack 创制了2个新的公文束,
bundle.js 和 0.bundle.js。

entry.js 和 a.js 被打包进 bundle.js.

b.js 被打包进 0.bundle.js.

2、require.ensure() 的坑点

require.ensure{ require;

如上代码保障了拆分点被创建,並且 a.js 被 webpack 分开打包。

require.ensure(['./a.js'], function { require;

下面代码, a.js 和 b.js 都被打包到一块,何况从主文件束中拆分出去。但唯有b.js 的源委被实施。a.js 的内容仅仅是可被选用,但并未有被输出。

想去推行 a.js,大家要求异步地引用它,如 require,让它的 JavaScritp
被实行。

、单独打包成温馨写的名字配置

内需配置chunkFilename,和publicPath。public帕特h是按需加载单独打包出来的chunk是以publicPath会基准来寄放的,chunkFilename:[name].js那样才会最毕生成正确的门路和名字

module.exports={ entry:'./js/entry.js', output:{ path:path.resolve, filename:'js/a.bundle.js', publicPath:"./", chunkFilename:'js/[name].js' }

因而router/index.js 改良为懒加载组件:

const Province = r => require.ensure => r(require('@/components/Province.vue')), 'chunkname1')const Segment = r => require.ensure => r(require('@/components/Segment.vue')), 'chunkname2')const Loading = r => require.ensure => r(require('@/components/Loading.vue')), 'chunkname3')const User = r => require.ensure => r(require('@/components/User.vue')), 'chunkname3')

基于 chunkame的两样, 上面的八个零件,
将会被分成3个块打包,最后包装之后与组件相关的js文件会分为3个
(除了app.js,manifest.js, vendor.js卡塔尔(قطر‎

分模块打包之后在 dist目录下是那般的, 这样就把一个大的
js文件分为多少个个小的js文件了,按需去下载,其余的应用办法和import的成效等同

上述就是本文的全体内容,希望对大家的读书抱有利于,也期望大家多多点拨脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图