华山资源网

记一次react前端项目打包优化的方法
网络编程 2024/12/24 佚名
3 1

前文

之前一年多前接手的一个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="/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打包


记一次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文件，使用正常，成功
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com