lodash作为一个比较常用的前端开发工具集,在使用webpack进行vendor分离的实践中,会遇到将整个lodash文件分离到vendor.js的问题。这样会使vendor.js文件变得特别大。

webpack.config.js文件代码如下:


var path = require('path'); module.exports = mode => {
return {
entry: {
A: './moduleA.js',
B: './moduleB.js',
C: './moduleC.js',
},
mode: mode,
output: {
path: path.resolve(__dirname, 'dist/'),
filename: '[name].js'
},
optimization: {
usedExports: true,
splitChunks: {
cacheGroups: {
commons: {
chunks: 'all',
minChunks: 2,
maxInitialRequests: 5,
minSize: 0
},
vendor: {
test: /node_modules/,
chunks: "initial",
name: "vendor",
priority: 10,
enforce: true
}
}
}
},
module: { },
plugins: [ ]
}
}

运行npm run test脚本命令,结果如下:


Hash: 5d86af7ed04c57cca071
Version: webpack 4.28.4
Time: 5707ms
Built at: 2019-01-11 19:25:04
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 238 bytes 1 [emitted] commons~A~C
vendor.js 69.7 KiB 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js

如上面的情况,vendor.js文件为69.7kb,如果再引用了其他第三方库,文件会更大。

那么,如何在开发的过程中,压缩lodash呢?

babel-loader & babel-plugin-lodash

可以使用babel-loader在对*.js文件进行解析,然后借助于babel-plugin-lodash插件对引用的lodash进行类似tree shaking的操作,这样就可以去除未使用的lodash代码片段。

安装所需依赖:


yarn add babel-loader @babel/core @babel/preset-env babel-plugin-lodash --dev

像下面这样修改webpack.config.js配置文件:


...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['lodash']
}
}
}
]
}
...

运行npm run test,脚本命令结果如下:


Hash: 30def5521978552cc93d
Version: webpack 4.28.4
Time: 3249ms
Built at: 2019-01-11 21:25:23
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 226 bytes 1 [emitted] commons~A~C
vendor.js 502 bytes 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js

vendor.js文件从69.7kb降至502bytes

根据babel-plugin-lodash参考文档介绍,使用lodash-webpack-plugin可以进一步压缩lodash

lodash-webpack-plugin

安装lodash-webpack-plugin依赖:


yarn add lodash-webpack-plugin --dev

修改webpack.config.js配置文件如下:


var LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); ...
plugins: [
new LodashModuleReplacementPlugin,
]
...

运行npm run test脚本命令,结果如下所示:


Hash: 30def5521978552cc93d
Version: webpack 4.28.4
Time: 2481ms
Built at: 2019-01-11 21:07:23
Asset Size Chunks Chunk Names
A.js 1.46 KiB 3 [emitted] A
B.js 1.53 KiB 4 [emitted] B
C.js 1.54 KiB 5 [emitted] C
commons~A~B~C.js 132 bytes 0 [emitted] commons~A~B~C
commons~A~C.js 226 bytes 1 [emitted] commons~A~C
vendor.js 502 bytes 2 [emitted] vendor
Entrypoint A = vendor.js commons~A~B~C.js commons~A~C.js A.js
Entrypoint B = commons~A~B~C.js B.js
Entrypoint C = vendor.js commons~A~B~C.js commons~A~C.js C.js

vendor.js依然是502 bytes,问题不在loadsh-webpack-plugin,它虽然会进一步优化lodash,但是在无法进一步优化的情况下,它也没办法。

一般情况下,不使用lodash-webpack-plugin就可以满足开发的需要,但是文件特别大的情况下,建议还是使用它。

参考源代码

来源:https://segmentfault.com/a/1190000017862101

webpack最小化lodash的更多相关文章

  1. How Javascript works (Javascript工作原理) (十四) 解析,语法抽象树及最小化解析时间的 5 条小技巧

    个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...

  2. C++ 最小化到托盘

    #define WM_SHOWTASK (WM_USER + 1) void CTestDlg::OnSysCommand(UINT nID, LPARAM lParam) { if ((nID &a ...

  3. nw.js自定义最小化图标的click事件

    选择frameless时,最小化和关闭按钮的点击事件需要自己来做,办法是: /* * 下面两个模块一定要引入到js文件中 */ var gui = require('nw.gui'); var win ...

  4. WinForm任务栏最小化

    在C#编写的WinForm里,在FormBorderStyle设为None的时候,任务栏点击程序图标,不会自动最小化.在主窗口WinForm.cs里加入如下代码后,即可恢复该功能. protected ...

  5. WinForm最小化到托盘以及托盘右键菜单

    首先,先拖一个NotifyIcon到主窗体,然后设置NotifyIcon的图标,不然等下最小化后,都找不到那个程序了,还有那个Text也是,不写名字,就默认是NotifyIcon了..如下图: 然后双 ...

  6. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  7. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  8. DFA 最小化

    NDFA.εNDFA 确定化的细节这里就不总结了,这里说一说DFA最小化的算法. 关于DFA最小化,

  9. AOPR软件最小化消失了

    结合日常使用软件的经历,我们都是选择最小化按钮后,点击状态栏中最小化图标即可恢复软件窗口.在使用Advanced Office Password Recovery的过程中,有时会出现点击最小化按钮后在 ...

随机推荐

  1. WebGL 踩坑系列-2

    需求:绘制斑点在球面上走过的路径 思路:要绘制斑点在球面上走过的路径,首先要记录上一时刻和当前时刻该斑点所在球面的位置,并且实时更新当前时刻的斑点位置和上一时刻的斑点位置. 为了方便,上一时刻斑点所在 ...

  2. Postman+Newman+Jenkins APItest自动化集成测试

    postman做接口测试简单易用很容易上手,但是接口越来越多,每次手动点击runner进行测试不灵活,最近就研究了下newman,利用newman实现接口的自动化测试,但是每次需要命令行操作也不方便, ...

  3. sass基础2

  4. SpingCloud微服务架构学习(二)之Actuator监控

    我们那我们之前编写的服务提供者为例,为项目添加如下依赖: <dependency> <groupId>org.springframework.boot</groupId& ...

  5. jQuery中的CSS-DOM操作

    html代码 <p style="color:blue;">武汉PHP培训-武汉长乐教育</p> css()方法 $("p").css( ...

  6. python复习目录

    目录 一.计算机基础 二.python 2.1初始python 2.1 python基础1 2.2 python基础2 三.函数 3.1 函数进阶 3.2 函数之装饰器 3.3 递归函数之二分查找 3 ...

  7. 微信小程序电商实战-商品详情(上)

    先看一下今天要实现的小程序商品详情页吧!   商品详情.gif 本期我们要实现小程序商品详情页的头部标题.头部轮播.商品详情浮动按钮和商品内页布局. 一.设置头部标题 如上图所示,头部标题是商品详情 ...

  8. css多行文本溢出显示省略号

    HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  9. 绘图之Canvas学习

    一  Canvas的用法   博客:http://blog.taorenjia.com/?p=237    1.drawCircle(float cx, float cy, float radius, ...

  10. May 03rd 2017 Week 18th Wednesday

    Truth needs no colour; beauty, no pencil. 真理不需要色彩,美丽不需要涂饰. There is no absoulte truth and everlastin ...