lodash 是一個(gè) JavaScript 的實(shí)用工具庫, 它提供了數(shù)十種的工具方法, 用來處理 JavaScript 各種類型的數(shù)據(jù)
簡(jiǎn)單使用
例如下面一段代碼, 使用了它的深克隆和 find 方法
import _ from 'lodash'
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles', 'age': 1, 'active': true }
]
const deep = _.cloneDeep(users)
const res = _.find(users, o => o.age < 40)
console.log('deep', deep)
console.log('res', res)
簡(jiǎn)單配置一下 webpack, 然后打包一下, 會(huì)驚奇的發(fā)現(xiàn)打包體積居然有70多k, 明明只使用了它的兩個(gè)方法, 寫了不到10行的代碼呢 !!
想到了多年以前被 jQuery 支配的恐懼: 只是想用它發(fā)一個(gè) ajax , 但是卻不得不引入整個(gè)的 jQuery
那么, 有沒有 按需加載指定方法 的 方法呢 ?
有的 !
官方提供了一種叫 cherry pick 的方案
cherry pick 按需加載
只需要這樣寫就可以了
import cloneDeep from 'lodash/cloneDeep'
import find from 'lodash/find'
const users = [
{ 'user': 'barney', 'age': 36, 'active': true },
{ 'user': 'fred', 'age': 40, 'active': false },
{ 'user': 'pebbles', 'age': 1, 'active': true }
]
const deep = cloneDeep(users)
const res = find(users, o => o.age < 40)
console.log('deep', deep)
console.log('res', res)
需要什么就 import lodash + '/' + 對(duì)應(yīng)的方法名就可以的. 如下圖, lodash 的源碼里面就是這樣寫的: 它的每個(gè)方法都是一個(gè)獨(dú)立的文件, 所以需要用什么方法, 找到對(duì)應(yīng)的文件名然后 import 就好啦
然后重新用 webpack 打包一下試試
不錯(cuò)的, 減少到26k 了
但是依然不太給力: 假如使用了 lodash 的十幾個(gè)方法, 就要寫十幾行的 import, 可以是可以, 就是很煩的, 有的時(shí)候?qū)懘a寫爽了是不想再翻上去寫個(gè) import 的
終極方案----lodash-webpack-plugin + babel-plugin-lodash
幸好, 別人也有過同樣的煩惱, 而且它寫了一個(gè)webpack的插件專門去處理 lodash 的打包體積問題
搜索 lodash webpack 關(guān)鍵字, 會(huì)找到這個(gè)插件 : lodash-webpack-plugin
這是它在 npm 官網(wǎng)上地址 https://www.npmjs.com/package/lodash-webpack-plugin
它也很友好地在readme文件中寫了使用方法, 不過, 它最近一次更新readme 的時(shí)間是十個(gè)月以前, 所以, 按照它的配置方法在 webpack4 下面是不能正常運(yùn)行的
我們現(xiàn)在自己配置一下 webpack:
// webpack.config.js
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
module.exports = {
// ... 其他配置
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['lodash']
}
}
}]
},
plugins: [
// ... 其他插件
new LodashModuleReplacementPlugin()
]
}
運(yùn)行這條命令安裝需要的一些依賴
yarn add @babel/preset-env webpack webpack-cli @babel/core babel-loader babel-plugin-lodash lodash-webpack-plugin -D
然后打包, 會(huì)發(fā)現(xiàn)體積只有8k, 而且還是可以正確運(yùn)行的
代碼地址如下:
https://github.com/xianjiezh/lodash-optimization
未完待續(xù)
有機(jī)會(huì)去看看 這個(gè)插件的源碼是什么原理...
