用lodash-es代替lodash

lodash為了良好的瀏覽器兼容性, 它使用了舊版es5的模塊語法; 而lodash-es則使用了es6的模塊語法, 這讓webpack之類的打包工具可以對其進行tree shake以刪除為使用的代碼來優化打包尺寸.

下面的代碼直接從lodash中引入trimStart方法

import { trimStart } from 'lodash';

如果使用的是webpack進行打包的話, 僅此一行就會導致打包尺寸增加 70+ kb

而如果把lodash改為lodash-es

import { trimStart } from 'lodash-es';

下面的代碼和使用lodash-es進行導入有一樣的效果

import trimStart from 'lodash/trimStart';

這是默認導入的語法, 但是這種導入方式當我們需要在一個文件中導入多個lodash方法時就不太方便了

例如需要trimStart和trimEnd方法, 從lodash-es中導入只需一行

import { trimStart, trimEnd } from 'lodash-es';

而通過默認導入的方式從lodash中導入則需要兩行

import trimStart from 'lodash/trimStart';
import trimEnd from 'lodash/trimEnd';

那么打包尺寸則只會增加 1kb 左右, 70kb對比1kb差距還是十分巨大的.

通過上面的對比, 如果是使用webpack來進行打包的話, 我們在使用lodash庫時, 盡量通過lodash-es來進行導入操作, 以此來避免以此行導入全部lodash代碼到最終生產環境的代碼.