记一次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 相关文章推荐
JavaScript中的View-Model使用介绍
Aug 11 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
js实现开启密码大写提示
Dec 21 Javascript
js+html制作简单验证码
Feb 16 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解vuex的简单使用
2018/03/12 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
详解python3百度指数抓取实例
2016/12/12 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python列表返回重复数据的下标
2020/02/10 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
python如何实现DES加密
2020/09/21 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
传播学毕业生求职信
2013/10/11 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
亮剑观后感500字
2015/06/05 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫