Webpack实现按需打包Lodash的几种方法详解


Posted in Javascript onMay 08, 2017

前言

在数据操作时,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 的模块引用方式才有效。

以上即是我目前所知道的几种方式,如果哪位朋友有更好的方式(比如只需要全局引入一次),请一定分享与我!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 Javascript
JS正则表达式验证中文字符
May 08 #Javascript
bootstrap table表格插件使用详解
May 08 #Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 #Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 #Javascript
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
H5上传本地图片并预览功能
May 08 #Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
You might like
PHP中的CMS的涵义
2007/03/11 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python列表生成器迭代器实例解析
2019/12/19 Python
小学生自我评价范例
2013/09/24 职场文书
财务助理岗位职责
2013/11/10 职场文书
班组长岗位职责范本
2014/01/05 职场文书
村容村貌整治方案
2014/05/21 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
可可西里观后感
2015/06/08 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
《颐和园》教学反思
2016/02/19 职场文书