lodash 打包体积优化及原理

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行的代码呢 !!

image.png

想到了多年以前被 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 就好啦

image.png

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

image.png

不错的, 减少到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, 而且还是可以正确运行的

image.png

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

未完待续

有机会去看看 这个插件的源码是什么原理...