前言

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了湖口免費建站歡迎大家使用！

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

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

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

函數(shù)模塊

Lodash 中的每個函數(shù)在 NPM 都有一個單獨的發(fā)布模塊。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/函數(shù)名的格式單獨引入需要的函數(shù)模塊。

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

使用插件優(yōu)化

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

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

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

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

于是我機智的到 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 函數(shù)的文件中只需要引用一次 lodash，即可調(diào)用任意函數(shù)而不會造成完全打包。

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

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

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

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

網(wǎng)站欄目：Webpack實現(xiàn)按需打包Lodash的幾種方法詳解
文章位置：http://chinadenli.net/article24/gojhje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、App開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站設計公司、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)