lodash 是一個 JavaScript 的實用工具庫, 它提供了數(shù)十種的工具方法, 用來處理 JavaScript 各種類型的數(shù)據(jù)

簡單使用

例如下面一段代碼, 使用了它的深克隆和 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, 然后打包一下, 會驚奇的發(fā)現(xiàn)打包體積居然有70多k, 明明只使用了它的兩個方法, 寫了不到10行的代碼呢 !!

image.png

想到了多年以前被 jQuery 支配的恐懼: 只是想用它發(fā)一個 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 + '/' + 對應(yīng)的方法名就可以的. 如下圖, lodash 的源碼里面就是這樣寫的: 它的每個方法都是一個獨立的文件, 所以需要用什么方法, 找到對應(yīng)的文件名然后 import 就好啦

image.png

然后重新用 webpack 打包一下試試

image.png

不錯的, 減少到26k 了

但是依然不太給力: 假如使用了 lodash 的十幾個方法, 就要寫十幾行的 import, 可以是可以, 就是很煩的, 有的時候?qū)懘a寫爽了是不想再翻上去寫個 import 的

終極方案----lodash-webpack-plugin + babel-plugin-lodash

幸好, 別人也有過同樣的煩惱, 而且它寫了一個webpack的插件專門去處理 lodash 的打包體積問題

搜索 lodash webpack 關(guān)鍵字, 會找到這個插件 : lodash-webpack-plugin
這是它在 npm 官網(wǎng)上地址 https://www.npmjs.com/package/lodash-webpack-plugin

它也很友好地在readme文件中寫了使用方法, 不過, 它最近一次更新readme 的時間是十個月以前, 所以, 按照它的配置方法在 webpack4 下面是不能正常運行的

我們現(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()
  ]
}

運行這條命令安裝需要的一些依賴

yarn add @babel/preset-env webpack webpack-cli @babel/core babel-loader babel-plugin-lodash lodash-webpack-plugin -D

然后打包, 會發(fā)現(xiàn)體積只有8k, 而且還是可以正確運行的

image.png

代碼地址如下:
https://github.com/xianjiezh/lodash-optimization

未完待續(xù)

有機(jī)會去看看 這個插件的源碼是什么原理...