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实例收集(20个)
Apr 21 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
ES6的新特性概览
Mar 10 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
hadoop中一些常用的命令介绍
2013/06/19 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
php画图实例
2014/11/05 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
机关党建工作汇报材料
2014/08/20 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
大学开学感言
2015/08/01 职场文书
小学校园广播稿
2015/08/18 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python