react webpack优化

十三先生。

已于 2022-10-11 01:10:33 修改

阅读量432

点赞数 1

文章标签： javascript 前端 webpack

于 2022-09-22 11:20:14 首次发布

本文链接：https://blog.csdn.net/weixin_44812511/article/details/126988325

版权

打包产物分析

在这里插入图片描述
因为模块过大，打包2.7分钟，使用工程自带的analyzer插件找出占用空间较大的包

通过对打包产物分析，决定从以下几个方面对该模块进行优化

配置externals

通过配置build.config.ts的externals使一些较大的第三方库脱离webpack打包，采用cdn的方式引用，从而减少打包时间

 externals: {
    bizcharts: 'BizCharts',
    // 以下配置为BizCharts依赖的第三方库，需要同时提供
    react: 'React',
    'react-dom': 'ReactDOM',
    antd: 'antd',
    lodash: '_',
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>xxx微应用</title>
  </head>

  <body>
    <div id="ice-container"></div>
  </body>
  
  <script src="https://g.xxx.com/code/lib/react/16.8.5/umd/react.production.min.js"></script>
  <script src="https://g.xxx.com/code/lib/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
  <script src="https://g.xxx.com/code/lib/bizcharts/4.1.15/BizCharts.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.20.6/antd.min.js" ></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</html>

替换moments.js

我们可以看到打包后的moments文件过大，而整个项目我们又只使用了moments的format方法，因为antd的日期库使用了moments，antd为我们提供了 antd-dayjs-webpack-plugin 插件，无需对现有代码做任何修改直接替换成 Day.js，只需要在build.config.ts配置上就可以

 webpackPlugins: {
    'antd-dayjs-webpack-plugin': {},
 }

按需引入

我们可以看到打包后的antd的icon是全量的图标，我们可以通过按需引入的方式只引我们用到的图标

配置peerDependencies

因为有几个第三方依赖是自己开发的，而且每个包开发时间不一样导致依赖版本和主应用各不相同。所以需要通过配置依赖包的peerDependencies解决出现依赖和主项目依赖重复且版本不一致的问题

"peerDependencies": {
    "antd": "^4.6.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
  },

注：peerDependencies是需要配在第三方包上面的，而不是主项目，可能会引起样式或者功能bug，注意检查。

在这里插入图片描述
现在看打包时间变成2分钟了

代码分割 Code Splitting

随着应用的增长，代码 bundle 的大小也将随之增长。为了避免因体积过大而导致加载时间过长，我们可以按照路由对代码进行分割成不同的代码块，然后当路由被访问的时候才加载对应的代码，能够显著地提高应用性能。
在routes文件开启按需加载只需引入lazy方法,改变引入方式即可

+ import { lazy } from 'ice';
- //import Home from '@/pages/Home';
+ const Home = lazy(() => import('@/pages/Home'));

默认生成的 chunk 是按照 [index] 作为 chunk 名称，但我们可以通过 webpackChunkName 指定每个 chunk 来自哪个文件，以便于查看和调试：

- const Home = lazy(() => import('@/pages/Home'));
+ const Home = lazy(() => import(/* webpackChunkName: 'home' */'@/pages/Home'));

在这里插入图片描述

在这里插入图片描述
最后结果是把2.7分钟优化到了36秒

十三先生。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react webpack优化

随着应用的增长，代码 bundle 的大小也将随之增长。为了避免因体积过大而导致加载时间过长，我们可以按照路由对代码进行分割成不同的代码块，然后当路由被访问的时候才加载对应的代码，能够显著地提高应用性能。我们可以看到打包后的moments文件过大，而整个项目我们又只使用了moments的format方法，因为antd的日期库使用了moments，antd为我们提供了。我们可以看到打包后的antd的icon是全量的图标，我们可以通过按需引入的方式只引我们用到的图标。在routes文件开启按需加载只需引入。
复制链接

扫一扫