Mã tách/tải trước nội dung trong khi người dùng đang duyệt?

Question

Sử dụng các công cụ như Webpack, chúng tôi có thể bật chia tách mã và chỉ tải mã ứng dụng của chúng tôi một cách không đồng bộ khi được yêu cầu.

Ví dụ trong ngữ cảnh của ứng dụng phản ứng với bộ phản ứng-bộ định tuyến.

Load initial page. 

-> go to new route 
---> webpack loads in the component file required asynchronous. 

Webpack đợi cho đến khi mã được yêu cầu để bắt đầu yêu cầu.

Câu hỏi của tôi là, khi tải mã ứng dụng cơ bản, chúng tôi có thể bắt đầu tải phần còn lại của mã, ngay cả trước khi người dùng bắt đầu chuyển đổi sang tuyến mới không?

Chế độ xem của tôi sẽ ngăn người dùng chờ tải xuống webpack.

-> Load initial page 
--> user sitting idle or browsing on home page 
----> Start loading application code for rest of the application 
---> user goes to new route (faster UX because code has already download in the background) 

Tôi hy vọng điều này có ý nghĩa

Answer 1

Có bạn có thể đạt này. Tôi sẽ chỉ ra một trong những giải pháp có thể.

Trước hết chúng ta hãy tạo backgroundLoader cho xếp hàng khối yêu cầu:

const queue = []; 
const delay = 1000; 

let isWaiting = false; 

function requestLoad() { 
    if (isWaiting) { 
     return; 
    } 
    if (!queue.length) { 
     return; 
    } 
    const loader = queue.pop(); 
    isWaiting = true; 
    loader(() => { 
     setTimeout(() => { 
     isWaiting = false; 
     requestLoad(); 
     }, delay) 
    }); 
} 

export default (loader) => { 
    queue.push(loader); 
    requestLoad(); 
} 

Chức năng này sẽ được tải khối của bạn ở chế độ nền với 1 giây chậm trễ (bạn có thể tinh chỉnh nó - ví dụ bắt đầu nảy đợi sau ví dụ 5 giây hoặc ngẫu nhiên mảng khối).

Tiếp theo, bạn phải đăng ký xếp hàng chức năng backgroundLoader bạn require.ensure:

import render from './render'; // not relevant in this example 
import backgroundLoader from './backgroundLoader'; 

let lightTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeA.css')); 
    }, 'light'); 
} 

let darkTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeB.css')); 
    }, 'dark'); 
} 

let pinkTheme = (cb) => { 
    require.ensure([],() => { 
    cb(require('./themeC.css')); 
    }, 'pink'); 
} 
backgroundLoader(lightTheme); 
backgroundLoader(darkTheme); 
backgroundLoader(pinkTheme); 

export default (themeName) => { // router simulation 
    switch(themeName) { 
    case 'light': 
     lightTheme(render); 
     break; 
    case 'dark': 
     darkTheme(render); 
     break; 
    case 'pink': 
     pinkTheme(render); 
     break; 
    } 
}; 

Khi bạn yêu cầu đoạn của bạn trong switch tuyên bố bạn vượt qua render hàm chứa chức năng quyết tâm. Trong backgroundLoader, chức năng này sẽ bị trống, chỉ dẫn đến tải head ứng dụng của bạn.

Full mã cho ví dụ này, bạn có thể nhìn thấy trên WebpackBin (bạn có thể kiểm tra mạng để xem cách khối được nạp ở chế độ nền)