Webpack按需打包Lodash的几种方式
来源:互联网 发布:手机联系人恢复软件 编辑:程序博客网 时间:2024/06/17 14:24
在数据操作时,Lodash 就是我的弹药库,不管遇到多复杂的数据结构都能用一些函数轻松拆解。
ES6 中也新增了诸多新的对象函数,一些简单的项目中 ES6 就足够使用了,但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库,即使是压缩后,现最新版本也有 71k的体积。不能为了吃一口饭而买下一个饭店啊。
针对这个问题,其实已经有很多可选方案了。
函数模块Lodash 中的每个函数在 NPM 都有一个单独的发布模块。 NPM: results for ‘lodash’
假如你只需要使用 _.isEqual,那么你只需要安装 lodash.isequal模块,然后按以下方式引用。
var isEqual = require('lodash.isequal')// or ES6import isEqual from 'lodash.isequal'isEqual([1, 2, 3], [1, 2, 3]) // true全路径引用在你完整安装 Lodash 后,可以按 lodash/函数名的格式单独引入需要的函数模块。
var difference = require('lodash/difference')// or ES6import 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,newwebpack.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,newwebpack.optimize.OccurrenceOrderPlugin,new webpack.optimize.UglifyJsPlugin]}
又或者是 .babelrc文件中。
以上工作完成了,在每个你需要使用 lodash 函数的文件中只需要引用一次 lodash,即可调用任意函数而不会造成完全打包。
import _ from 'lodash'_.add(1, 2) // 打包时只会引入这一个函数模块
- Webpack按需打包Lodash的几种方式
- 三种Webpack打包方式
- Jar的几种打包方式
- 插件自动打包的几种方式
- App 打包的几种方式
- iOS打包ipa的几种方式
- xcode打包的几种方式
- 安卓中程序打包的几种方式
- Android 多渠道打包的几种方式
- maven打包的几种方式
- 打包ArcGIS Engine应用程序的几种方式
- 打包ArcGIS Engine应用程序的几种方式
- Android几种常见的多渠道(批量)打包方式介绍
- Android几种常见的多渠道(批量)打包方式介绍
- 可运行jar包的几种打包/部署方式
- 可运行jar包的几种打包/部署方式
- Android几种常见的多渠道(批量)打包方式介绍
- Android几种常见的多渠道(批量)打包方式介绍
- 通过扫描就能获得信息Vin码识别技术
- smb文件共享
- 矢量资源工具Vector Asset Studio
- yocto
- Java时延
- Webpack按需打包Lodash的几种方式
- Linux 下多线程的消费者-生产者模型
- Power Strings (kmp中next数组的运用)
- C语言指针的形象理解-----/*自己编写*/
- 记一次MySQL使用外网IP连接超时
- 经典JUnit测试
- [YTU]_2354 (实现复数类中的加运算符重载【C++运算符重载】)
- 文件本身操作NSManager
- Android_UI:Activity