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新的事件绑定机制on()的使用技巧
Apr 26 Javascript
初识Node.js
Mar 20 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
Angular(5.2->6.1)升级小结
Dec 27 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
vue获取form表单的值示例
Oct 29 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 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
JAVA/JSP学习系列之四
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
python遍历目录的方法小结
2016/04/28 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
浅析Python 序列化与反序列化
2020/08/05 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
合同专员岗位职责
2013/12/18 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
法人授权委托书
2014/04/03 职场文书
化验员岗位职责
2015/02/14 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
Java界面编程实现界面跳转
2022/06/16 Java/Android