原文轉自：http://www.jb51.net/article/113235.htm

前言

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

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

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

函數模塊

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

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

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

全路徑引用

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

var?difference?=?require('lodash/difference') //?or?ES6 import?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.js var?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.js var?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] }

又或者是.babelrc文件中。

以上工作完成了，在每個你需要使用 lodash 函數的文件中只需要引用一次 lodash，即可調用任意函數而不會造成完全打包。

import?_?from?'lodash' _.add(1,?2)?//?打包時只會引入這一個函數模塊

注意：必須要使用 ES2015 的模塊引用方式才有效。

以上即是我目前所知道的幾種方式，如果哪位朋友有更好的方式（比如只需要全局引入一次），請一定分享與我!

轉載于:https://blog.51cto.com/rozwel/1944764

總結

以上是生活随笔為你收集整理的Webpack实现按需打包Lodash的几种方法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。