Webpack实现按需打包Lodash的几种方法详解
原文转自:http://www.jb51.net/article/113235.htm
前言
在数据操作时,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 的模块引用方式才有效。
以上即是我目前所知道的几种方式,如果哪位朋友有更好的方式(比如只需要全局引入一次),请一定分享与我!
转载于:https://blog.51cto.com/rozwel/1944764
Webpack实现按需打包Lodash的几种方法详解相关推荐
- python 打包exe_将python文件打包exe独立运行程序方法详解
首先需要安装pyinstaller库. pip install pyinstaller exe程序打包步骤 cmd 进入要编译的python文件所在的文件夹, 然后 pyinstaller -F he ...
- python打包安卓的方法_打包发布Python模块的方法详解
前言 昨天把自己的VASP文件处理库进行了打包并上传到PyPI,现在可以直接通过pip和easy_install来安装VASPy啦(同时欢迎使用VASP做计算化学的童鞋们加星和参与进来), 由于自己的 ...
- python解析器打包_打包发布Python模块的方法详解
前言 昨天把自己的VASP文件处理库进行了打包并上传到PyPI,现在可以直接通过pip和easy_install来安装VASPy啦(同时欢迎使用VASP做计算化学的童鞋们加星和参与进来), 由于自己的 ...
- Linux打包(归档)和压缩详解
Linux打包(归档)和压缩详解 一.打包(归档)和压缩(包含两者的区别) 二.Linux tar打包命令详解 2.1 tar命令做打包操作 2.2 tar命令做解打包操作 2.3 tar命令做打包压 ...
- php网站搬家怎么打包,搬家时打包衣柜的5种方法
搬家时打包衣柜的5种方法 来源:网络 作者:迈思特英语 In most cases moving is an exciting prospect but an incredibly stre ...
- 计算机考试能带手机抄么,考研 | 考场能带手机、手表吗?需自带文具?考场规则详解...
原标题:考研 | 考场能带手机.手表吗?需自带文具?考场规则详解 目前距离2021考研初试只有一个月时间, 大家备考复习的怎么样了? 这个时候的复习大家就要注意重点的把握以及知识的查漏补缺,同时在复习 ...
- xcode打包IPA上架App Store图文详解
2017年最新整理的xcode打包IPA上传App Store完整教程,帮助新手们快速掌握ios上架流程! 分为8 步进行 1.申请iOS证书 2.导入证书到钥匙串 3.xcode配置iOS证书 4. ...
- 资深码农:拿下软件测试,只需掌握好这两种方法!
摘要:软件测试是软件工程中非常重要的一个环节,本文将从软件测试的目的.白盒测试和黑盒测试两大分类和以及各自的具体分类,来阐述软测试的相关知识. 一.软件测试的目的 发现缺陷 尽早和尽量多的发现被测对象 ...
- 使用Jenkins打包和部署Maven工程步骤详解
上节已部署jenkins: https://blog.csdn.net/weixin_39816740/article/details/104943258 并 准备好一个maven项目发布到码云 上节 ...
最新文章
- 数字时代企业迎变局,如何让增长变简单?
- java编程赋值运算符_跟我学java编程—简单赋值运算符“=”
- 计算机视觉与深度学习 | 基于MATLAB的Vibe算法消除鬼影(代码版)
- DL开源框架Caffe | 模型微调 (finetune)的场景、问题、技巧以及解决方案
- 数据库-排序-升降序-多列
- ORA-01658:无法为表空间XXX中的段创建initial区
- mysql如何让表建立连接吗_MySQL 表与表之间建立关系
- Linux ct获取本机ip,linux ip命令
- 性能测试 获取 服务器间响应时间,性能测试指标分析TPS、响应时间、并发量等...
- Kubernetes学习笔记之Calico CNI Plugin源码解析(二)
- linux系统c语言编译icpc,ACM-ICPC 比赛环境的使用
- EditPlus3.1工具以及Js插件(打包下载)
- 洛阳地铁一号线无人驾驶_洛阳地铁第一个过街通道建成,地铁时代离洛阳人还远吗?...
- 关卡二:Flex伸缩布局
- 猿创征文|弃文从工,从小白到蚂蚁工程师,我的 Java 成长之路
- dfuse 发布全新 EOSIO 链迁移工具
- 63.android 简单的下拉刷新动画水滴效果
- mac 国家税务总局发票不显示验证码
- 爱普生(EPSON) ME300 问题解决
- 考研英语不熟悉的词义(List16-List20)