React + Antd + Wepack 项目体积优化记录（一期）

Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。

最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！

非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。

如果你也想知道线上应用的响应时长，也可以监控一下试试，看看效果 Webfunny前端监控和埋点平台

目标

第一期目标：大幅降低项目打包体积，抽离公共模块和插件，利用浏览器缓存机制，提升页面的加载效率。

第二期目标：再次降低项目打包体积，通用功能，样式等高度组件化，提高复用效率；臃肿的插件寻找替代方案。

一、分析Webfunny的代码架构

使用过webfunny的同学应该都知道，为了方便一键部署，应用中心fe、监控系统fe、埋点系统fe三个模块的文件是放在同一个静态服务器下的。应用中心为公共服务，监控系统，埋点系统是独立服务，可以同时运行，也可以独立运行。

所以我们需要抽出三个模块的公共部分，利用浏览器的缓存机制，公共模块只需要加载一次就可以了。

二、分析Webfunny打包体积明细

如果想要优化打包体积，就必须先要知道是哪些文件导致的。可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构，能快速定位需要优化的地方，对开发者非常友好，功能强大，界面优美，给作者点赞。

加入插件，打包分析效果如下图：

三、各个击破，逐步优化

1）第一需要优化的是echarts，它打包后的体积接近1M，是可忍孰不可忍？echarts是webfunny重要的图表展示插件，体积庞大，但又必不可少。同时，三个模块都有用到，可以提出来。

优化前，是通过import的方式，直接引入echart插件，还有一些兼容文件，和附属的依赖等，所以会被webpack直接打包到common.js文件中，导致体积庞大。

const echarts = require("echarts")
window.echarts = echarts
require("../lib/china")
import "echarts-liquidfill"

优化后，通过引入js文件的方式，将echarts相关的文件，通过url引入。由于浏览器有缓存机制，所以只要任意一个模块引入echarts后，其他模块则通过缓存获取，减少了echarts被多次引入的情况了。

<script src="../wf_assets/echarts/echarts.min.js"></script>
<script src="../wf_assets/echarts/echarts-liquidfill.min.js"></script>
<script src="../wf_assets/echarts/china.js"></script>
<script src="../wf_assets/echarts/world.js"></script>
<link rel="stylesheet" href="../wf_assets/css/antd.min.css">

2) antd按需引入，因为antd中的日期组件使用了moment来处理日期格式，但是一个日期格式处理居然有600kb，很不合理，主要是因为有很多国际化的处理，所以在打包的时候可以将其过滤掉。

另外jquery也无需在使用了，替换jquery相关的方法，可以移除。

new webpack.IgnorePlugin(/^\.\/locale/, /moment$/),

3) lodash.js里的方法有很多，但是项目只用到1,2个，所以改成按需加载

引入依赖

// 安装依赖
npm i lodash-webpack-plugin babel-plugin-lodash

// webpack
plugins: [
        new LodashModuleReplacementPlugin()
]

配置.babelrc

"plugins": [ "lodash" ]

bn.js被多处引入，冗余了，需要消除重复的依赖包，给bn.js定义别名。

resolve: {
    alias: {
      "bn.js": path.resolve(process.cwd(), "node_modules", "bn.js")
    }
},

js-beautify只用到了js美化，改为按需引入

import beatify from "js-beautify/js/lib/beautify.js"

四、优化结果分析

根据打包的结果可以看到，我们将比较大块的，冗余的，无效的模块都移除了，剩下的是一些必须要打包的内容了。

从结果上看，common.js文件由之前的3.6M降低到1.7M了，通过gzip压缩后，传输的大小差不多是500Kb左右。

好了，这一期的优化就先到这里，有什么问题可以联系我（微号： webfunny2）^ _ ^

了解更多可以关注我们，Webfunny更懂前端的监控和埋点系统