1. 普通加載

10年積累的做網(wǎng)站、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有趙縣免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

使用vue-cli構(gòu)建項(xiàng)目后，我們會(huì)在Router文件夾下面的index.js里面引入相關(guān)的路由組件,如：

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

這樣做的結(jié)果就是webpack在npm run build的時(shí)候會(huì)打包成一個(gè)整個(gè)的js文件，如果頁面一多，會(huì)導(dǎo)致這個(gè)文件非常大，加載緩慢，為了解決這個(gè)問題，需要將他分成多個(gè)小文件，而且還要實(shí)現(xiàn)異步按需加載，即用到了再加載，而不用一股腦全部加載

2. webpack的require.ensure()實(shí)現(xiàn)按需加載

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

1. dependencies：字符串構(gòu)成的數(shù)組，聲明 callback 回調(diào)函數(shù)中所需的所有模塊,模塊作為依賴被加載
2. callback：只要加載好全部依賴，webpack 就會(huì)執(zhí)行此函數(shù)。require 函數(shù)的實(shí)現(xiàn)，作為參數(shù)傳入此函數(shù)。當(dāng)程序運(yùn)行需要依賴時(shí)，可以使用 require() 來加載依賴。函數(shù)體可以使用此參數(shù)，來進(jìn)一步執(zhí)行 require() 模塊。
3. errorCallback：當(dāng) webpack 加載依賴失敗時(shí)，會(huì)執(zhí)行此函數(shù)。
4. chunkName：由 require.ensure() 創(chuàng)建出的 chunk 的名字。通過將同一個(gè) chunkName 傳遞給不同的 require.ensure() 調(diào)用，我們可以將它們的代碼合并到一個(gè)單獨(dú)的 chunk 中，從而只產(chǎn)生一個(gè)瀏覽器必須加載的 bundle。

使用方法一：

require.ensure([], function(require){
  require('./a.js');
});
// 此時(shí)會(huì)單獨(dú)打包出一個(gè)js文件，沒有自定義名稱的話，會(huì)被命名為1.js(有hash時(shí)候會(huì)帶上md5)

使用方法二：

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

1、此時(shí)a.js作為依賴被加載，但是沒有被執(zhí)行（官方文檔說的only loads the modules）
2、a.js和b.js會(huì)被打包成一個(gè)文件。
3、回調(diào)函數(shù)里只require了b.js，只有b.js的內(nèi)容會(huì)被執(zhí)行。
4、如果你需要使用a.js的內(nèi)容，需要再加上require('./a.js')

require.ensure(['./list'], function(require){
  var list = require('./list');
  list.show();
});

給require.ensure的第一個(gè)參數(shù)傳了['./list']，執(zhí)行到這里的時(shí)候list.js會(huì)被瀏覽器下載下來，但是并不會(huì)執(zhí)行l(wèi)ist.js模塊中的代碼，也就是webpack官網(wǎng)說的，不會(huì)進(jìn)行evaluate。真正進(jìn)行evaluate的時(shí)候是到了后面這句var list = require('./list');這就是所謂的懶執(zhí)行。

寫在函數(shù)中的多個(gè)模塊會(huì)被打包在一起，這一點(diǎn)和上面沒有區(qū)別。另外，寫在數(shù)組中的模塊也會(huì)跟他們打包在一起，不管你有沒有手動(dòng)執(zhí)行。

vue中使用

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

其實(shí)resolve的作用就是Promise里面那個(gè)resolve，在這里就是定義一個(gè)異步的組件

使用動(dòng)態(tài) import語法

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');
const router = new VueRouter({
 routes: [
  { path: '/foo', component: Foo }
 ]
})
// /* webpackChunkName: "foo" */使用命名chunk，一個(gè)特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)
// webpack要加配置 output需要加個(gè)chunkFilename
chunkFilename: '[name].js'

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站標(biāo)題：vue路由組件按需加載的幾種方法小結(jié)
分享網(wǎng)址：http://www.rwnh.cn/article48/psjchp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、電子商務(wù)、做網(wǎng)站、定制網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)