[前端技巧] lodash | 如何正确的 import lodash

前言

通常前端都会导入一些好用的第三方套件，但是有时后导入的套件并非是基于 es module 进行开发，webpack 没办法发挥 tree shaking 的功能，在 import 时一不注意就会载入一堆没有必要的 function。
在这篇文章中以 lodash 作为举例， lodash 是个能够帮我们处理各种资料的函式库，减少写一些比较琐碎的程式码。但因为 lodash 在 2012 年就被开源，历史较为久远，可能有多种缘故，导致目前 lodash 本身并不是使用 es module。所以如果在意 bundle size 的大小，就要特别注意在 import lodash 的方式。

先安装我们需要的 lodash :

yarn add lodash

安裝 webpack-bundle-analyzer

yarn add -D webpack-bundle-analyzer

webpack.config.js 中加入以下代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

然后用 yarn start 启动 server ，跟方法 1 一样，除了原本专案的 8080 port 之外，你还会看到在 8888 port 启动了 webpack-bundle-analyzer

一、分析用不同的方式 import lodash 的结果

第一种方式：不指定 function 的路径

不指定 function 路径也就像我们平常使用 named exports 的 module 一样，我们稍微修改 App.js 的程式码，在 component 里面加上 lodash 的 isEmpty：

import React from 'react';
import { isEmpty } from 'lodash';

const App = ({ title }) => (
  <div>{isEmpty(title) ? 'Title is Empty!!' : title}</div>
);

export default App;

接着，我们用 webpack bundle analyzer 看看使用这种 import 方式的 bundle size 为多少。
很夸张的是，明明只有用到 isEmpty 这个 function，结果 lodash 打包后的档案大小却足足有 531KB， 不禁让人怀疑 isEmpty 是多么伟大的 function ，做了包山包海的事情。

第二种方式：指定 function 的路径

接下来，我们换一种 import 的方式，看看对 bundle size 会有什么影响。

天哪，换一种方式结果让 lodash 打包后的大小足足少了 22 倍，这是什么魔法？

import isEmpty from 'lodash/isEmpty';

为什么两种 import 的方式会导致 bundle size 不一样

我们必须知道 lodash 是一个使用 UMD (Universal Module Definition) 的套件，这意味着 lodash 并不满足在 webpack 中的 tree-shaking 必须是 es module 的条件。所以第一种方法实际上会载入完整的 lodash ，最终导致 bundle size 莫名的巨大；而第二种方法就是只载入一个档案，再从档案中拿出我们需要的 isEmpty，如此一来就不用担心载入整包 lodash 的问题。
可是如果都要像第二种方法这样写 code 实际上有点麻烦，而且团队可能一开始没考虑到这个问题，程式码已经有多处使用第一种方法，改起来十分麻烦。

二、如何正确的 import lodash

以下提供两种我认为比较简易的解法，可以用最少量的配置，达到降低 bundle size 的方法。

使用 lodash-es 而不是 lodash

这也是 lodash 的 GitHub 提到的作法，lodash 的 GitHub 中写道：「Looking for Lodash modules written in ES6 or smaller bundle sizes? Check out lodash-es.」，所以第一种解法便是改用 lodash-es：

// 下載 lodash-es
yarn add lodash-es

// 修改程式碼 lodash 的引用，變成使用 lodash-es
import { isEmpty } from 'lodash-es';

你可以看到 bundle size 顺利地从 531KB 降低到 24KB 左右，与上面提到的第二种 import 的方法有异曲同工之妙。

至于为什么第二种 import 方法与用 lodash-es 最终打包后的档案大小不一样，这又是另一个议题了。

使用 babel-plugin-import

如果你不想动到大量的程式码，上面使用 lodash-es 意味者必须全域取代 lodash 的引用，其实有另一个解法是使用 babel 的插件，让 babel 帮我们从第一种 import 的方式改成第二种。

首先，安装 babel-plugin-import 这个插件：

yarn add -D babel-plugin-import

然后修改 .babelrc 中的设定：

{
  ...
  "plugins": [
    [
      "import",
      {
        "libraryName": "lodash",
        "libraryDirectory": "",
        "camel2DashComponentName": false
      }
    ]
  ]
}

再用 webpack bundle analyzer 看看打包后的档案大小，可以看到档案打小与第二种 import 的方式一样都是 24.31KB，同样成功地降低 bundle size。

结论

在这篇文章中我们了解了如何透过 webpack bundle analyzer 分析打包后的档案，并且透过这个工具看到不同 import lodash 方式对于 bundle size 的影响。

针对如何降低 lodash 被打包后的档案大小，本文提供两种方式，分别是使用 lodash-es 全域取代原本 lodash 的引用，或使用 babel-plugin-import 非侵入式的改动大量的程式码，而是在打包时处理，这两种方式都可以达到不把完整的 lodash 都打包进 bundle 的结果，就看各位如何选择啰！

原文链接：
https://medium.com/starbugs/the-correct-way-to-import-lodash-libraries-bdf613235927