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 日期计算算法
Sep 11 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 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函数utf8转gb2312编码
2006/12/21 PHP
如何隐藏你的.php文件
2007/01/04 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python flask解析json数据不完整的解决方法
2019/05/26 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
详解python如何引用包package
2020/06/07 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
放飞中国梦演讲稿
2014/04/23 职场文书
课外小组活动总结
2014/08/27 职场文书
卖房协议书样本
2014/10/30 职场文书
幼儿园辞职信
2015/05/13 职场文书
太行山上观后感
2015/06/05 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记