在日常的開發中，我們經常會用到一些js的庫比如 lodash、rxjs 等等，就 lodash 而言，比如我們要使用 lodash 的深拷貝 clonedeep 方法，現在分別對比兩種引入方式構建的速度與體積。
測試的 webpack.config.js 配置
const path =
require
('path');
module.exports =
}
import
from
"lodash"
;function
clone
(source)
const obj =
const clonedobj =
clone
(obj)
console.
log(clonedobj, clonedobj === obj)
hash: b1cf462402800ae666ae
version: webpack 4.44.1
time: 1897ms
built at: 2020-08-20 13:46:48
asset size chunks chunk names
bundle.js 1.38 mib main [emitted] main
entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes [built]
[./src/index.js] 189 bytes [built]
+ 1 hidden module
我們可以看到這種方式打包的資源包括完整的lodas**件，但是這裡有個問題，如果我們在專案只是用 clonedeep，並不會用到 lodash 其他的 api，如此一來是不是浪費了很多體積和構建的時間，所以我們應該考慮資源能不能按需載入，下面我們看一下第二種引入方式。
前端js效能優化（一）
多數瀏覽器使用單一程序來處理ui重新整理和js指令碼執行，因此同一時刻只能做一件事。因此，當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行，無論指令碼是內嵌的還是外鏈的。由於每乙個script標籤都會阻塞頁面渲染，所以減少頁面包含的script標籤數量有助於改善這一狀況。這不...
前端js效能優化總結
前端js效能優化總結 從 書寫效率和巨集觀的部署等兩個方向進行總結。1 效率 變數使用優化 宣告物件和陣列使用字面量，如var newarray var newobject js尋找變數使用變數作用域鏈，如果常常使用的在外層作用域的可以使用臨時變數代替。如for 寫成var tbody docume...
前端頁面效能優化的幾種方式
本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。提公升頁面效能優化的常見方式 快取是所有效能優化的方式中最重要的一步 重要 有的人可能會回答local storage 和session storage，其實不是這個。瀏覽器快取和儲...