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使用prototype定义对象类型
Feb 07 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
微信小程序事件流原理解析
Nov 27 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
提问的智慧
2006/10/09 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
使用Node.js实现一个多人游戏服务器引擎
2019/03/13 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
python关于调用函数外的变量实例
2019/12/26 Python
python实现简单学生信息管理系统
2020/04/09 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
保密工作实施方案
2014/02/24 职场文书
上海世博会口号
2014/06/19 职场文书
艾滋病宣传标语
2014/06/25 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
法制教育主题班会
2015/08/13 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers