require.ensure是Webpack中提供的一種按需加載模塊的方式。它的主要作用是在需要的時候,才會去請求對應的模塊文件,而不是在打包時一股腦把所有模塊都打包進去。這樣可以大大提升應用的性能。
在Vue中使用require.ensure也非常簡單,我們可以在路由配置中使用,在用戶訪問某個路由時,才會去加載對應的組件文件。
const router = new VueRouter({ routes: [ { path: '/foo', component: resolve =>{ require.ensure(['./Foo.vue'], () =>{ resolve(require('./Foo.vue')); }); }} ] })
上述代碼中,我們定義了一個名為“/foo”的路由,對應的組件文件是“Foo.vue”。在組件定義中,我們使用require.ensure來加載該組件文件。注意,這里的resolve參數是一個回調函數,用于返回該模塊的定義。
需要注意的是,require.ensure可能會導致非常多的異步請求,從而降低網頁的性能。因此,我們需要合理使用require.ensure,盡可能減少異步請求的數量。