前言

在數據操作時，Lodash 就是我的彈藥庫，不管遇到多復雜的數據結構都能用一些函數輕松拆解。

ES6 中也新增了諸多新的對象函數，一些簡單的項目中 ES6 就足夠使用了，但還是會有例外的情況引用了少數的 Lodash 函數。一個完整的 Lodash 庫，即使是壓縮后，現最新版本也有 71k 的體積。不能為了吃一口飯而買下一個飯店啊。

針對這個問題，其實已經有很多可選方案了。

函數模塊

Lodash 中的每個函數在 NPM 都有一個單獨的發布模塊。NPM: results for ‘lodash'

假如你只需要使用_.isEqual，那么你只需要安裝lodash.isequal模塊，然后按以下方式引用。

var isEqual = require('lodash.isequal')// or ES6import isEqual from 'lodash.isequal'isEqual([1, 2, 3], [1, 2, 3]) // true

全路徑引用

在你完整安裝 Lodash 后，可以按lodash/函數名的格式單獨引入需要的函數模塊。

var difference = require('lodash/difference')// or ES6import difference from 'lodash/difference'difference([1, 2], [1, 3]) // [2]

使用插件優化

在簡單場景下，以上兩種方式足以解決問題。

而遇到復雜的數據對象時，我們不得不在一個文件中引入多個 Lodash 函數，這樣就需要在文件中寫多個require或import相關函數。

import remove from 'lodash/remove'import uniq from 'lodash/uniq'import invokeMap from 'lodash/invokeMap'import sortBy from 'lodash/sortBy'// more...

正寫到關鍵處卻因為引入一個函數要拉到文件頭部去定義引用而打亂了思路，很不爽！

于是我機智的到 Github 去搜索了webpack和lodash兩個關鍵詞的組合，排在首位的 lodash-webpack-plugin 就是為了解決這個問題而生。

使用時需要以下模塊，其實除了前兩個剩下的一般都已安裝了：

$ npm i -S lodash-webpack-plugin babel-plugin-lodash babel-core babel-loader babel-preset-es2015 webpack

配置：

webpack.config.jsvar LodashModuleReplacementPlugin = require('lodash-webpack-plugin');var webpack = require('webpack');module.exports = { module: { loaders: [{ loader: 'babel', test: //.js$/, exclude: /node_modules/, query: { plugins: ['transform-runtime', 'lodash'], presets: ['es2015'] } }] }, plugins: [ new LodashModuleReplacementPlugin, new webpack.optimize.OccurrenceOrderPlugin, new webpack.optimize.UglifyJsPlugin ]}

其中babel-plugin-lodash的配置，也就是plugins: ['lodash'] ，并不是一定要在loaders中，也可以單獨定義babel。

webpack.config.jsvar LodashModuleReplacementPlugin = require('lodash-webpack-plugin');var webpack = require('webpack');module.exports = { module: { loaders: [{ loader: 'babel', test: //.js$/, exclude: /node_modules/ }] }, babel: { presets: ['es2015'], plugins: ['transform-runtime', 'lodash'] }, plugins: [ new LodashModuleReplacementPlugin, new webpack.optimize.OccurrenceOrderPlugin, new webpack.optimize.UglifyJsPlugin ]}