记一次react前端项目打包优化的方法


Posted in Javascript onMarch 30, 2020

前文

之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急。复制代码

分析

通过控制台判断加载资源时间还有资源大小

记一次react前端项目打包优化的方法

通过开发者工具可以看到白屏的主要原因在于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 }),
  ]
}

记一次react前端项目打包优化的方法

这是本地开发时候打包的情况,没有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>
   <title>TCRM</title>
 </head>
 <body>

2.使用echarts的地方改为下面这样引入

原先的   var myChart = echarts.init(this.refs.char,'crm');

改版后    var myChart = this.$echarts.init(this.refs.char,'crm');

优化src文件

对于用户来说,可能每次操作的时候只操作对应的几个模块,其他模块很少操作到,如果能够按需加载那就可以化整为零每次加载当前模块的chunk,既不影响用户使用,又减少加载的资源参考了一下其他文章,决定采用react-loadable进行切割划分,按路由来切割资源复制代码

react-loadable相关代码

原先写法,组件引入

import Dashboard from './components/Dashboard';

使用react-loadable后

import Loadable from 'react-loadable';
const LoadingFun = () => {
  return <div className="center-div"><Spin spinning={true} size="large" tip="加载中..."/></div>;
};
const Dashboard = Loadable({loader: () => import('./components/Dashboard'), loading: LoadingFun});

webpack相关
const webpackConfigBase = {
  ......
  output: {
    path: resolve('./dist'),
    filename: 'bundle.[hash:6].js',
    chunkFilename: 'chunks/[name].[hash:6].js',
  }  
}

本地运行分chunks打包

记一次react前端项目打包优化的方法 

记一次react前端项目打包优化的方法

 分步打包碰到的问题

1.打包样式问题,所有的css打包到bundle.css中,但是采用按路由打包后测试的小妹妹反馈样式很奇怪看了一下加载的资源,发现确实没有打包到不同路由下的样式,检查了一下,发现是webpack配置里面要配合改一下

const webpackConfigBase = {
  ......
  plugins: [
    // 提取css
    //原先的 new ExtractTextPlugin('bundle.[hash:6].css'),
    new ExtractTextPlugin({filename: 'bundle.[hash:6].css', allChunks: true}), // 增加一个allChunks:true 
  ]
}

2.chunk的名字问题,先要指定对应的chunkName参考 https://github.com/mrdulin/blog/issues/43

gzip压缩

项目是用的nginx做代理调用打包后的资源,所以可以考虑在nginx这一层增加配置配合gzip文件

新增相关配置

gzip on;
gzip_min_length 1k;
gzip_buffers   4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types    text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;

优化成果

记一次react前端项目打包优化的方法

echarts通过cdn引入,成功
bundle.js体积大大减小,加载时间也由原先的30s+降到了3s+,生产环境带宽更高会更快,成功
切换路由加载对应的chunk文件,使用正常,成功

到此这篇关于记一次react前端项目打包优化的方法的文章就介绍到这了,更多相关react前端项目打包优化内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
页面点击小红心js实现代码
May 26 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
javascript实现简易数码时钟
Mar 30 #Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 #Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 #Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 #Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 #Javascript
JS中FormData类实现文件上传
Mar 27 #Javascript
You might like
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python编写百度贴吧的简单爬虫
2015/04/02 Python
python基于socket实现网络广播的方法
2015/04/29 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python和Go语言的区别总结
2019/02/20 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
公务员更新知识培训实施方案
2014/03/31 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
企业整改报告范文
2014/11/08 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL