脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Webpack按需打包Lodash

Webpack实现按需打包Lodash的几种方法详解

 更新时间：2017年05月08日 14:23:41   投稿：daisy  
这篇文章主要给大家介绍了关于Webpack实现按需打包Lodash的几种方法，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

前言

在数据操作时，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 的模块引用方式才有效。

以上即是我目前所知道的几种方式，如果哪位朋友有更好的方式（比如只需要全局引入一次），请一定分享与我!

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • 微信小程序实现吸顶特效

    微信小程序实现吸顶特效

    这篇文章主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 用JavaScript对JSON进行模式匹配(Part 1-设计)

    用JavaScript对JSON进行模式匹配(Part 1-设计)

    在《从 if else 到 switch case 再到抽象》这篇文章里面说到，解决 if else 和 switch case 分支过多的一个方法，就是做一个专用的 dispatcher ，让它来负责进行筛选与转发。
    2010-07-07
  • js 匿名调用实现代码

    js 匿名调用实现代码

    js中定义函数的方式有多种，函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。
    2009-06-06
  • JavaScript设计模式之性能优化模式享元模式

    JavaScript设计模式之性能优化模式享元模式

    这篇文章主要介绍了JavaScript设计模式之性能优化模式享元模式，享元设计模式是用于性能优化的模式，这种设计模式的核心在于可以共享技术并支持对大量细分过后的对象进行调整，更多相关内容需要的小伙伴可以参考一下
    2022-06-06
  • EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

    EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

    这篇文章主要介绍了EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)的相关资料,需要的朋友可以参考下
    2016-02-02
  • JavaScript去掉空格的方法集合

    JavaScript去掉空格的方法集合

    JavaScript去掉空格的方法集合，脚本之家以前发布过很多的去除空格的代码，这个更多更全面。
    2010-12-12
  • javascript实现放大镜功能

    javascript实现放大镜功能

    这篇文章主要为大家详细介绍了javascript入门之实现放大镜功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 拖动table标题实现改变td的大小(css+js代码)

    拖动table标题实现改变td的大小(css+js代码)

    拖动列宽的表格table标题同时改变td的大小，本文将以实例演示为大家呈现，感兴趣的朋友可以参考下哈，希望对你学习js或者css有所帮助
    2013-04-04
  • iScroll.js 使用方法参考

    iScroll.js 使用方法参考

    以下这篇文章是iScroll.js官网的中文翻译，尽管自己英文不好，但觉得原作者们翻译的这个资料还是可以的，基本用法介绍清楚了。如果你英文比较好的话，可以看看官网的资料
    2016-05-05
  • 小程序实现背景音乐播放和暂停

    小程序实现背景音乐播放和暂停

    这篇文章主要为大家详细介绍了小程序实现背景音乐播放和暂停，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06

最新评论