记一次记一次react前端项目打包优化的方法前端项目打包优化的方法
主要介绍了记一次react前端项目打包优化的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具
有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前文前文
之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署
到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至
于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急。复制代码
分析分析
通过控制台判断加载资源时间还有资源大小
通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光加载
这个bundle.js就花了30s+,所以白屏时间太长,用户体验差要解决这个问题就得从这个bundle.js入手复制代码
通过webpack-bundle-analyzer来分析主要是哪些模块过大
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const webpackConfigDev = {
plugins: [
......
new BundleAnalyzerPlugin({ analyzerPort: 3012 }),
]
}
这是本地开发时候打包的情况,没有gzip的情况下是这么大的,本地开发编译打包也是挺慢的从上图看可以分析出几个比较大
的模块,其中一个最大的是echarts,另外就是源文件src目录下的代码所以优化分为三步来走:
1.优化echarts;
2.优化src下的业务代码;
3.对打包后的文件进行gzip压缩;
优化优化
优化优化echarts
echarts在项目中用到的地方不少,但是业务平时很少用到对应的模块,整个打包进去bundle.js只会让整个包变大思路是echarts
文件不打包进bundle.js,采用cdn的方法引入复制代码
优化优化echarts相关代码相关代码
1.入口文件index.html这里直接用script直接引入cdn的echarts文件
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="max-age=604800" />
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
评论0