W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
懶加載或者按需加載,是一種很好的優(yōu)化網(wǎng)頁或應用的方式。這種方式實際上是先把你的代碼在一些邏輯斷點處分離開,然后在一些代碼塊中完成某些操作后,立即引用或即將引用另外一些新的代碼塊。這樣加快了應用的初始加載速度,減輕了它的總體體積,因為某些代碼塊可能永遠不會被加載。
我們在 代碼分離 中的例子基礎上,進一步做些調整來說明這個概念。那里的代碼確實會在腳本運行的時候產(chǎn)生一個分離的代碼塊 lodash.bundle.js ,在技術概念上“懶加載”它。問題是加載這個包并不需要用戶的交互 - 意思是每次加載頁面的時候都會請求它。這樣做并沒有對我們有很多幫助,還會對性能產(chǎn)生負面影響。
我們試試不同的做法。我們增加一個交互,當用戶點擊按鈕的時候用 console 打印一些文字。但是會等到第一次交互的時候再加載那個代碼塊(print.js)。為此,我們返回到代碼分離的例子中,把 lodash 放到主代碼塊中,重新運行 代碼分離 中的代碼 final Dynamic Imports example。
project
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules
src/print.js
console.log(
'The print.js module has loaded! See the network tab in dev tools...'
);
export default () => {
console.log('Button Clicked: Here\'s "some text"!');
};
src/index.js
+ import _ from 'lodash';
+
- async function getComponent() {
+ function component() {
const element = document.createElement('div');
- const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+ const button = document.createElement('button');
+ const br = document.createElement('br');
+ button.innerHTML = 'Click me and look at the console!';
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.appendChild(br);
+ element.appendChild(button);
+
+ // Note that because a network request is involved, some indication
+ // of loading would need to be shown in a production-level site/app.
+ button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
+ const print = module.default;
+
+ print();
+ });
return element;
}
- getComponent().then(component => {
- document.body.appendChild(component);
- });
+ document.body.appendChild(component());
現(xiàn)在運行 webpack 來驗證一下我們的懶加載功能:
...
Asset Size Chunks Chunk Names
print.bundle.js 417 bytes 0 [emitted] print
index.bundle.js 548 kB 1 [emitted] [big] index
index.html 189 bytes [emitted]
...
許多框架和類庫對于如何用它們自己的方式來實現(xiàn)(懶加載)都有自己的建議。這里有一些例子:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: