摘要：問題描述我經常需要使用一些基礎性的功能性函數比如數據去重對象合并等通常情況下選擇方向大致有個自己實現使用原生的使用提供的首先放棄自己實現這樣的方式因為工作量大即使實現了沒有經過測試不夠穩定沒有意義因為已經存在現成的別人實現的其次如果原生提供

問題描述:
我經常需要使用一些基礎性的, 功能性函數, 比如數據去重, 對象合并等. 通常情況下,選擇方向大致有3個:

自己實現 API

使用原生的 API

使用 lodash 提供的 API

首先放棄 ‘自己實現API’ 這樣的方式, 因為:

工作量大

即使實現了, 沒有經過測試, 不夠穩定

沒有意義, 因為已經存在現成的, 別人實現的.

其次,如果原生提供的 API, 功能齊全, 兼容性好, 那么當然使用原生的 API.但是實際上原生 API 存在如下的一些問題:

語義不明, 比如說刪除數組的某個元素, 通過 splice, 但是我們更希望通過 del 這個更明了的方法

功能不全, 比如說實現對象的拷貝, 通過 Object.assign(), 但是 Object.assign() 只能支持
shadow copy, deep 不支持

兼容問題, 比如一些 ES6 出現的方法, 在低版本的設備中不支持

API 不全, 也就是 API 不能覆蓋我們所有的開發需求.

有些函數不符合我們的想法, 我們希望函數不會改變參與運算的數據結構, 但是原生的一些 API 會改變.

所以最終選擇 lodash.js.

我們使用的姿勢可以有如下幾種:
1.整體通過 script 引入
這種引入方式不可行,體積太大, 會引入很多自己不需要的東西

2.單個引入
*在 main.js 里面引入, 以期望所有的組件都可以使用: 不可行, 在 main.js 里面引入, 只能在 main.js 里面生效

在單個 .vue 組件里面引入

將函數掛載到 window or Vue.prototype 上面 (推薦)
創建 my-lodash.js

import {debounce} from "lodash"
let _ = {
    debounce
}
window._ = _;

在 main.js 中引入此文件, 即可在全局環境中使用這些函數了.

實驗步驟:

我們先使用 vue-cli 創建一個新的, 空白的項目. 并且修改配置文件, 去掉js的壓縮.

1. 對空白項目打包:

                  Asset       Size  Chunks                    Chunk Names
       static/js/app.js    15.4 kB       0  [emitted]         app
    static/js/vendor.js     338 kB       1  [emitted]  [big]  vendor
  static/js/manifest.js    6.06 kB       2  [emitted]         manifest

2. 在 App.vue 中引入 lodash/merge :

                  Asset       Size  Chunks                    Chunk Names
       static/js/app.js    15.6 kB       1  [emitted]         app
    static/js/vendor.js     409 kB       0  [emitted]  [big]  vendor       
  static/js/manifest.js    6.06 kB       2  [emitted]         manifest

3. 在 Hello.vue 中引入 lodash/merge :

                  Asset       Size  Chunks                    Chunk Names
       static/js/app.js    15.6 kB       1  [emitted]         app
    static/js/vendor.js     409 kB       0  [emitted]  [big]  vendor
  static/js/manifest.js    6.06 kB       2  [emitted]         manifest

觀察可以發現

引入 lodash/merge之后, 體積增加了: 71k

不管你是在 App.vue 還是在 Hello.vue 中引入, 最終都會被打包到 vendor.js 中.

繼續實驗步驟, 現在我們加上壓縮.
1. 不引入 lodash/merge

                  Asset       Size  Chunks             Chunk Names
       static/js/app.js    11.7 kB       0  [emitted]  app
    static/js/vendor.js     110 kB       1  [emitted]  vendor
  static/js/manifest.js    1.49 kB       2  [emitted]  manifest

2. 引入 lodash/merge:

                  Asset       Size  Chunks             Chunk Names
    static/js/vendor.js     125 kB       0  [emitted]  vendor
       static/js/app.js    11.8 kB       1  [emitted]  app
  static/js/manifest.js    1.49 kB       2  [emitted]  manifest

觀察可以發現: 引入 lodash/merge 之后, 體積增加了 15k.

考慮新的問題:
我們在項目中引入了 lodash/merge 函數, 然后我們使用的一個第三方的 npm lib, 它也使用了lodash/merge, 此時打包, 會有什么樣的結果?

第三方 lib 的大小

    Asset     Size  Chunks             Chunk Names
 index.js  24.4 kB       0  [emitted]  app
style.css  3.75 kB       0  [emitted]  app

引入第三方 lib, 打包之后的大小:

                  Asset       Size  Chunks             Chunk Names
    static/js/vendor.js     149 kB       0  [emitted]  vendor
       static/js/app.js      12 kB       1  [emitted]  app
  static/js/manifest.js    1.49 kB       2  [emitted]  manifest

觀察:
相比較而言, 增加了 24k 大小, 也就是說我們引入的第三方 lib, 大小為 24k, 和我們看到的結果一致.

這個結果反饋出來的是:
第三方 lib 中, 引用的 lodash/merge 函數, 然后項目中自己也使用了 lodash/merge 函數。
此時, 二者之間并沒有公用.

面對這個結果, 我們能做的是什么呢?

讓 第三方 lib, 就是我自己的第三方 lib, 在打包的時候, 不會把它的依賴項目一起打包起來.

在第三方 lib 的 package.json 里面聲明它的依賴項目.

用戶在下載第三方 lib 的時候, 會一起把在 package.json 中的依賴項目一起下載.

最后我們來討論下:
我們說引入了一個 lodash/merge 函數, 項目的體積在壓縮后就增加了 15k, 那么如果多引入幾個函數呢?

引入 lodash/assign + 8k
引入 lodash/concat + 1k
引入

import _assign from "lodash/assign"
import _concat from "lodash/concat"
import _map from "lodash/map"
import _keyBy from "lodash/keyBy"
import _orderBy from "lodash/keyBy"
import _sampleSize from "lodash/sampleSize"
import _reject from "lodash/reject"
import _isArray from "lodash/isArray"
import _isBuffer from "lodash/isBuffer"
import _merge from "lodash/merge"

最終項目大小增加了 29k.