摘要：?jiǎn)栴}描述我經(jīng)常需要使用一些基礎(chǔ)性的功能性函數(shù)比如數(shù)據(jù)去重對(duì)象合并等通常情況下選擇方向大致有個(gè)自己實(shí)現(xiàn)使用原生的使用提供的首先放棄自己實(shí)現(xiàn)這樣的方式因?yàn)楣ぷ髁看蠹词箤?shí)現(xiàn)了沒(méi)有經(jīng)過(guò)測(cè)試不夠穩(wěn)定沒(méi)有意義因?yàn)橐呀?jīng)存在現(xiàn)成的別人實(shí)現(xiàn)的其次如果原生提供

問(wèn)題描述:
我經(jīng)常需要使用一些基礎(chǔ)性的, 功能性函數(shù), 比如數(shù)據(jù)去重, 對(duì)象合并等. 通常情況下,選擇方向大致有3個(gè):

自己實(shí)現(xiàn) API

使用原生的 API

使用 lodash 提供的 API

首先放棄 ‘自己實(shí)現(xiàn)API’ 這樣的方式, 因?yàn)?

工作量大

即使實(shí)現(xiàn)了, 沒(méi)有經(jīng)過(guò)測(cè)試, 不夠穩(wěn)定

沒(méi)有意義, 因?yàn)橐呀?jīng)存在現(xiàn)成的, 別人實(shí)現(xiàn)的.

其次,如果原生提供的 API, 功能齊全, 兼容性好, 那么當(dāng)然使用原生的 API.但是實(shí)際上原生 API 存在如下的一些問(wèn)題:

語(yǔ)義不明, 比如說(shuō)刪除數(shù)組的某個(gè)元素, 通過(guò) splice, 但是我們更希望通過(guò) del 這個(gè)更明了的方法

功能不全, 比如說(shuō)實(shí)現(xiàn)對(duì)象的拷貝, 通過(guò) Object.assign(), 但是 Object.assign() 只能支持
shadow copy, deep 不支持

兼容問(wèn)題, 比如一些 ES6 出現(xiàn)的方法, 在低版本的設(shè)備中不支持

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

有些函數(shù)不符合我們的想法, 我們希望函數(shù)不會(huì)改變參與運(yùn)算的數(shù)據(jù)結(jié)構(gòu), 但是原生的一些 API 會(huì)改變.

所以最終選擇 lodash.js.

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

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

在單個(gè) .vue 組件里面引入

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

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

在 main.js 中引入此文件, 即可在全局環(huán)境中使用這些函數(shù)了.

實(shí)驗(yàn)步驟:

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

1. 對(duì)空白項(xiàng)目打包:

                  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

觀察可以發(fā)現(xiàn)

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

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

繼續(xù)實(shí)驗(yàn)步驟, 現(xiàn)在我們加上壓縮.
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

觀察可以發(fā)現(xiàn): 引入 lodash/merge 之后, 體積增加了 15k.

考慮新的問(wèn)題:
我們?cè)陧?xiàng)目中引入了 lodash/merge 函數(shù), 然后我們使用的一個(gè)第三方的 npm lib, 它也使用了lodash/merge, 此時(shí)打包, 會(huì)有什么樣的結(jié)果?

第三方 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 大小, 也就是說(shuō)我們引入的第三方 lib, 大小為 24k, 和我們看到的結(jié)果一致.

這個(gè)結(jié)果反饋出來(lái)的是:
第三方 lib 中, 引用的 lodash/merge 函數(shù), 然后項(xiàng)目中自己也使用了 lodash/merge 函數(shù)。
此時(shí), 二者之間并沒(méi)有公用.

面對(duì)這個(gè)結(jié)果, 我們能做的是什么呢?

讓 第三方 lib, 就是我自己的第三方 lib, 在打包的時(shí)候, 不會(huì)把它的依賴項(xiàng)目一起打包起來(lái).

在第三方 lib 的 package.json 里面聲明它的依賴項(xiàng)目.

用戶在下載第三方 lib 的時(shí)候, 會(huì)一起把在 package.json 中的依賴項(xiàng)目一起下載.

最后我們來(lái)討論下:
我們說(shuō)引入了一個(gè) lodash/merge 函數(shù), 項(xiàng)目的體積在壓縮后就增加了 15k, 那么如果多引入幾個(gè)函數(shù)呢?

引入 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"

最終項(xiàng)目大小增加了 29k.