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

网络编程 2024/11/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

前文

之前一年多前接手的一个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="/UploadFiles/2021-04-02/echarts.min.js">

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打包
 

 分步打包碰到的问题
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;


优化成果

echarts通过cdn引入，成功

bundle.js体积大大减小，加载时间也由原先的30s+降到了3s+,生产环境带宽更高会更快，成功

切换路由加载对应的chunk文件，使用正常，成功

react项目打包优化,react,打包优化

标签：

react项目打包优化,react,打包优化

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“记一次react前端项目打包优化的方法”

暂无记一次react前端项目打包优化的方法的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

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

react项目打包优化,react,打包优化

详解Webpack抽离第三方类库以及common解决方案

12 种使用Vue 的最佳做法

评论“记一次react前端项目打包优化的方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接