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 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
详解a++和++a的区别
2017/08/30 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
python基础教程之类class定义使用方法
2014/02/20 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
详解python进行mp3格式判断
2016/12/23 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python实现控制台输出彩色字体
2020/04/05 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
门卫岗位职责
2013/11/15 职场文书
安全责任协议书
2014/04/21 职场文书
长城导游词300字
2015/01/30 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
七年级作文之秋游
2019/10/21 职场文书
mysql脏页是什么
2021/07/26 MySQL
CentOS安装Nginx并部署vue
2022/04/12 Servers