溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
在數據操作時，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 的模塊引用方式才有效。
以上即是我目前所知道的幾種方式，如果哪位朋友有更好的方式（比如只需要全局引入一次），請一定分享與我!
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
