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文件,如果頁面一多,會導致這個文件非常大,加載緩慢,為了解決這個問題,需要將他分成多個小文件,而且還要實現(xiàn)異步按需加載,即用到了再加載,而不用一股腦全部加載
2. webpack的require.ensure()實現(xiàn)按需加載
語法:require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
- dependencies:字符串構成的數(shù)組,聲明 callback 回調函數(shù)中所需的所有模塊,模塊作為依賴被加載
- callback:只要加載好全部依賴,webpack 就會執(zhí)行此函數(shù)。require 函數(shù)的實現(xiàn),作為參數(shù)傳入此函數(shù)。當程序運行需要依賴時,可以使用 require() 來加載依賴。函數(shù)體可以使用此參數(shù),來進一步執(zhí)行 require() 模塊。
- errorCallback:當 webpack 加載依賴失敗時,會執(zhí)行此函數(shù)。
- chunkName:由 require.ensure() 創(chuàng)建出的 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作為依賴被加載,但是沒有被執(zhí)行(官方文檔說的only loads the modules)
2、a.js和b.js會被打包成一個文件。
3、回調函數(shù)里只require了b.js,只有b.js的內容會被執(zhí)行。
4、如果你需要使用a.js的內容,需要再加上require('./a.js')
require.ensure(['./list'], function(require){ var list = require('./list'); list.show(); });
給require.ensure的第一個參數(shù)傳了['./list'],執(zhí)行到這里的時候list.js會被瀏覽器下載下來,但是并不會執(zhí)行l(wèi)ist.js模塊中的代碼,也就是webpack官網說的,不會進行evaluate。真正進行evaluate的時候是到了后面這句var list = require('./list');這就是所謂的懶執(zhí)行。
寫在函數(shù)中的多個模塊會被打包在一起,這一點和上面沒有區(qū)別。另外,寫在數(shù)組中的模塊也會跟他們打包在一起,不管你有沒有手動執(zhí)行。
vue中使用
comst List = resolve => { require.ensure([],() => { resolve(require('./list')) },'list') }
其實resolve的作用就是Promise里面那個resolve,在這里就是定義一個異步的組件
使用動態(tài) 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'
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
html中引入Vue.js的cdn實現(xiàn)簡單的文檔單頁
這篇文章主要為大家介紹了html中引入Vue.js的cdn實現(xiàn)簡單的文檔單頁示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08在vue中使用eacharts創(chuàng)建graph關系圖方式
這篇文章主要介紹了在vue中使用eacharts創(chuàng)建graph關系圖方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關資料,需要的朋友可以參考下2024-01-01在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12