關於vue與react路由中懶載入的使用
阿新 • • 發佈：2018-11-14
vue路由的懶載入
懶載入 --->延遲載入 ,在需要的時候進行載入,隨用隨載
像vue單頁面應用,如果麼有應用懶載入,運用webpack打包後的檔案將會異常的大,造成進入首頁時,需要載入的內容過多,時間過長,會長時間出現白屏,即使做了loading也是不利於使用者體驗,而運用懶載入則可以將頁面進行劃分,需要的時候載入頁面,可以有效地分擔首頁所承擔的載入壓力,減少首頁載入用時
- webpack程式碼分割
webpack 可以幫助我們將程式碼分成不同的邏輯塊，在需要的時候載入這些程式碼。
使用 require.ensure() 來拆分程式碼
require.ensure() 是一種使用 CommonJS 的形式來非同步載入模組的策略。在程式碼中通過 require.ensure([<fileurl>]) 引用模組
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
第一個引數指定依賴的模組，
第二個引數是一個函式，
在這個函式裡面你可以使用 require 來載入其他的模組，webpack 會收集 ensure 中的依賴，將其打包在一個單獨的檔案中，
在後續用到的時候使用 jsonp 非同步地載入進去。
const User = resolve => {
require.ensure(['./components/user/User.vue'],()=>{
resolve(require('./components/user/User.vue'));
});
}
react路由的懶載入
- lazyload-loader
// webpack 配置檔案中 使用lazyload-loader（必須將lazuyload-loader 放置在use的最右側）
module: { rules: [ { test: /\.(js|jsx)$/,, use: [ 'babel-loader', 'lazyload-loader' ] },
- 業務程式碼中
// 使用lazy! 字首 代表需要懶載入的Router
import Shop from 'lazy!./src/view/Shop';// Router 正常使用
<Route path="/shop" component={Shop} />