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中window.showModalDialog()用法详解
Dec 18 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
团购业务员岗位职责
2014/03/15 职场文书
学校募捐倡议书
2014/05/14 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
python Tkinter的简单入门教程
2021/04/11 Python