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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jquery延迟对象解析
Oct 26 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
小程序如何写动态标签的实现方法
Feb 05 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js异或加解密效果代码
2008/06/25 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue filters的使用详解
2018/06/11 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
Python实现文件复制删除
2016/04/19 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
农村婚礼证婚词
2014/01/08 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android