内容简介:虽然在工作中用react+antd写页面写了一年,但从来没自己去认认真真配置一个webpack,去分析去优化自己打出的包。在工程化成熟或者大点的公司,都有自己的打包工具,所以自己工作中很少去琢磨这些。为了试一下写出的组件库(打包工具:webpack4 + babel6开始前,大概说一下项目内容。项目基于react+react-router+antd+antd-doddle,自己日常在这个项目做一些技术验证与demo,就4个页面。组成如下:
虽然在工作中用react+antd写页面写了一年,但从来没自己去认认真真配置一个webpack,去分析去优化自己打出的包。在工程化成熟或者大点的公司,都有自己的打包工具,所以自己工作中很少去琢磨这些。为了试一下写出的组件库( antd-doddle )性能,就尝试自己去写一个webpack构建,真的是吓了自己一跳,流水账(tu)开始。
从npm run dev开始
打包工具:webpack4 + babel6
开始前,大概说一下项目内容。项目基于react+react-router+antd+antd-doddle,自己日常在这个项目做一些技术验证与demo,就4个页面。组成如下:
<Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}> <Switch> <Route exact path={menus.home.path} component={Home} /> <Route exact path={menus.renderProps.path} component={ExampleTable} /> <Route exact path={menus.hoc.path} component={Hoc} /> <Route exact path={menus.learnTest.path} component={LearnTest} /> </Switch> </Content>
页面js与公共(node_modules引用)js使用splitChunks分开打包。npm run dev,结果如下图,async.bundle.js大小24M,有点惊人的大。
打包工具:webpack4 + babel7
开始正题,npm run build
development与production
由于webpack在(mode)模式development与production还是有很大区别,当我直接将mode从development变成production,再运行npm start。打包大小还是有明显的变化,同时也报了三个警告,包体积大于244kb
打包大小从24M缩减到17M,由于run start是启用的webpack-dev-server来构建的,所以对应的production模式默认启用UglifyJsPlugin是无效的,但是可以手动去加入这段配置,然后打包大小能看到直线下降到3.25M,见下图
optimization: { minimizer: [ new UglifyJsPlugin() ], splitChunks: { name: 'async', minSize: 30000, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, chunks: 'all' }, } } }
production模式构建
以上其实都是在用webpack-dev-server构建,当用webpack去构建时,然后npm run build,结果是这样的:
压缩后大小已经减小到2.6M,还是有实质的进步,然后通过BundleAnalyzerPlugin这个插件看包的构成,会发现antd,antd-doddle,moment占了绝大多数的空间。
恰好我知道moment虽然不支持按需打包,由于支持了多语言,所以省去无用的语言选项,就可以有明显的优化,所以使用ContextReplacementPlugin这个插件,并加上只匹配中文的筛选,如下所示:
new webpack.ContextReplacementPlugin( /moment[/\\]locale$/, /zh-cn/, )
打包体积由2.6减少到2.3M。
当一个一个浏览完包的构成时,大小组成是这样的:
- atnd(609kb);
- antd-icon(477kb);
- antd-doddle(391kb)
- dragt.js(160kb)
- immutable(55*2kb)
- moment(53 *2kb)
- react-dom(100kb)
- others(400kb)
我留下了一些疑问:
- 发现有两个moment.js,两个immutable.js,一个引用路径是正常的,一个是包里的相对路径。
- 然后还有一个draft.js(引用来源是antd),一个富文本编辑库,但我并没有这相关的组件应用,所以被打进来也是不讲道理的。
- 然后看起来antd是按需引入(es module),但是我项目就4个页面,组件最多也就用到他所拥有的1/3,但是上面显示的285个,我的antd-doddle就更吓人了,居然有138个,我库中总共也就30来个导出,所以也是诡异。
为了减少大小,我还使用了babel-plugin-import插件,但没有实质性的改变,然后看到包的路径是es,说明现有的构建本来就已经做了tree-shaking,所以这确实是无用功。但公司项目和网上大多数文章提到的,都是打包都能优化到1M左右,所以应该还有优化的空间。后面我干了什么呢?
升级才是硬道理
打包工具:webpack4 + babel7
babel6升到babel7,修改一下配置。然后再运行npm run build, 结果如下:
当一个一个浏览完包的构成时,大小组成是这样的:
- atnd(367kb);
- antd-icon(475kb);
- react-dom(102kb)
- antd-doddle(66kb)
- immutable(55kb)
- moment(53kb)
- others(218kb)
不能说是奇迹,但确实解决了一些上面留下的疑问:moment,immutable重复打包;draft无端引入;antd与antd-doddle包数激增。大小也减少了至少1M,所以升级才是自然界应有的规律,更不要说前端。
babel6到babel7,到底发生了什么
看到这种优化的效果真的让我惊喜与惊讶,但究竟是什么带来了这种变化更让我更好奇。还没抓到核心的区别,有清楚的,请指点一下,怎么避免js公共函数的重复注入,怎么来优化编译来完美对接后面webpack打包的?想往外去看看大神们都什么意见,可特殊时期,我的梯子被折断了(衰)。
文章提到的项目地址: webpack打包 ,master分支是对应babel6,roadhg分支是对应babel7
以上所述就是小编给大家介绍的《从24M到1M: 一个react+antd后台系统构建打包历程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- [打包优化]从0到1搭建element后台框架之优化
- [打包优化]从0到1搭建element后台框架优化篇
- 后台管理系统 icec v1.1 发布,完善打包部署脚本
- 【前端打包部署】谈一谈我在SPA项目打包=>部署的处理
- Maven多模块项目打包前的一些注意事项(打包失败)
- tar打包如何不打包某一个文件夹(排除某些文件夹)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据结构与算法分析
韦斯 (Mark Allen Weiss) / 机械工业出版社 / 2013-2-1 / 79.00元
本书是国外数据结构与算法分析方面的经典教材,使用卓越的Java编程语言作为实现工具讨论了数据结构(组织大量数据的方法)和算法分析(对算法运行时间的估计)。 随着计算机速度的不断增加和功能的日益强大,人们对有效编程和算法分析的要求也不断增长。本书将算法分析与最有效率的Java程序的开发有机地结合起来,深入分析每种算法,并细致讲解精心构造程序的方法,内容全面、缜密严格。 第3版的主要更新如......一起来看看 《数据结构与算法分析》 这本书的介绍吧!