lodash 是一個經(jīng)常使用的數(shù)據(jù)處理工具庫眶拉。它使用起來很便利，但是也有個小問題，就是lodash本身挺大的(未壓縮下有1MB左右大小)。由于通常我們只會使用到lodah中的一部分函數(shù)呕屎，而并非是全部。將整個lodash都打包到工程中有點虧本敬察。所以一個自然的想法就是：可不可以只把我們需要的部分進行打包秀睛，舍棄未使用的部分。
下面介紹幾種方法來實現(xiàn)這個想法莲祸。
1. lodash-es + Webpack Tree Shake
webpack 4中實現(xiàn)的Tree Shake是一個很強力的功能蹂安，它可以通過分析代碼來將沒使用的代碼（Dead code）從bundle中移除，以此來減小bundle的大小锐帜。這里有一個前提條件：所使用的庫是使用ES6 的模塊系統(tǒng)實現(xiàn)的田盈，因為只有靜態(tài)庫才能進行Tree Shake。所以這里不能使用lodash缴阎，而需要使用lodash-es允瞧，因為lodash是基于CommonJS的，無法進行靜態(tài)文件分析蛮拔，也就無法進行Tree Shake述暂。lodash-es是基于esm的。
步驟一：安裝lodash-es
npm install --save lodash-es
步驟二：配置Webpack配置
Tree Shake只有在webpack 的production環(huán)境下才會生效建炫，同時需要設置optimization.usedExports=true(default as true)畦韭。
webpack.config.js
module.exports = {
mode: 'production',
optimization: {
usedExports: true
}
...
}
舉例
在代碼中只引入了join函數(shù)。在運行npx webpack編譯之后踱卵，使用webpack-bundle-analyzer觀看打包文件就會看到下圖廊驼，因為我們只引入了join函數(shù)。
2. lodash + direct importing
如果你想要使用lodash庫也可以惋砂，那么就需要直接導入你想要使用的函數(shù)了妒挎，例如：
import { join } from `lodash/join`;
這種直接從指定的文件中導入函數(shù)，所以不需要配置Webpack西饵。因為你聲明了只想導入lodash/join.js這個文件酝掩，而不是整個lodash文件【烊幔看到的bundle分析和上圖一樣期虾。
3.安裝特定的lodash subset
如果你只需要特定的lodash功能，比如需要debounce驯嘱，你可以只安裝
npm i --save lodash.debounce
其他的例子可以到這里查看镶苞。
總結(jié)
方法2&3并沒有使用Webpack Tree Shake的特性，只是直接導入文件來避免未使用代碼的引入鞠评。方法1才是真正依賴webpack進行代碼分析茂蚓，從而只將需要的代碼進行打包。
