lodash 是一個 JavaScript 的實用工具庫, 它提供了數十種的工具方法, 用來處理 JavaScript 各種類型的數據
簡單使用
例如下面一段代碼, 使用了它的深克隆和 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)
簡單配置一下 webpack, 然后打包一下, 會驚奇的發現打包體積居然有70多k, 明明只使用了它的兩個方法, 寫了不到10行的代碼呢 !!
想到了多年以前被 jQuery 支配的恐懼: 只是想用它發一個 ajax , 但是卻不得不引入整個的 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 + '/' + 對應的方法名就可以的. 如下圖, lodash 的源碼里面就是這樣寫的: 它的每個方法都是一個獨立的文件, 所以需要用什么方法, 找到對應的文件名然后 import 就好啦
然后重新用 webpack 打包一下試試
不錯的, 減少到26k 了
但是依然不太給力: 假如使用了 lodash 的十幾個方法, 就要寫十幾行的 import, 可以是可以, 就是很煩的, 有的時候寫代碼寫爽了是不想再翻上去寫個 import 的
終極方案----lodash-webpack-plugin + babel-plugin-lodash
幸好, 別人也有過同樣的煩惱, 而且它寫了一個webpack的插件專門去處理 lodash 的打包體積問題
搜索 lodash webpack 關鍵字, 會找到這個插件 : lodash-webpack-plugin
這是它在 npm 官網上地址 https://www.npmjs.com/package/lodash-webpack-plugin
它也很友好地在readme文件中寫了使用方法, 不過, 它最近一次更新readme 的時間是十個月以前, 所以, 按照它的配置方法在 webpack4 下面是不能正常運行的
我們現在自己配置一下 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()
]
}
運行這條命令安裝需要的一些依賴
yarn add @babel/preset-env webpack webpack-cli @babel/core babel-loader babel-plugin-lodash lodash-webpack-plugin -D
然后打包, 會發現體積只有8k, 而且還是可以正確運行的
代碼地址如下:
https://github.com/xianjiezh/lodash-optimization
未完待續
有機會去看看 這個插件的源碼是什么原理...
