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

前文

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

分步打包碰到的问题

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前端项目打包优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈React + Webpack 构建打包优化

    浅谈React + Webpack 构建打包优化

    本文介绍了React + Webpack 构建打包优化,分享给大家,具体如下: 使用 babel-react-optimize对 React 代码进行优化 检查没有使用的库,去除 import 引用 按需打包所用的类库,比如 lodash . echart 等 lodash 可以采用babel-plugin-lodash进行优化. 需要注意的是 在 babel-react-optimize 中使用了 babel-plugin-transform-react-remove-prop-types 这

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

    前文 之前一年多前接手的一个react项目,前段时间因为做业务中台项目,对公司现有的应用项目做中台化改造,这期间将项目部署到uat环境,测试期间,测试小妹妹和产品大叔都吐槽进入uat项目的时候要load很久,白屏时间超过30s,体验很差,生产不至于这么慢但也是白屏时间挺长的,所以减少白屏时间增加用户体验成为了当务之急.复制代码 分析 通过控制台判断加载资源时间还有资源大小 通过开发者工具可以看到白屏的主要原因在于bundle.js这个打包后的文件过大,达到3.6M加上uat环境带宽等问题的话,光

  • vue项目打包优化的方法实战记录

    vue项目打包优化的方法实战记录

    目录 1.按需加载第三方库 2.移除console.log 3. Close SourceMap 4. Externals && CDN 5.路由懒加载的方式 总结 1.按需加载第三方库 例如 ElementUI.lodash 等 a, 装包 npm install babel-plugin-component -D b, babel.config.js module.exports = { "presets": [ "@vue/cli-plugin-babe

  • Vue项目打包优化实践指南(推荐!)

    Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

  • vue-cli webpack2项目打包优化分享

    减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置

  • vue前端项目打包成Docker镜像并运行的实现

    vue前端项目打包成Docker镜像并运行的实现

    目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #

  • nginx部署多前端项目的几种方法

    nginx部署多前端项目的几种方法

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • Angular6项目打包优化的实现方法

    可以从以下三个角度优化: 输出包体组成分析文件 Rollup 摇树优化 导出Webpack配置,通过修改webpack配置优化打包 让我们来逐一分析. 输出包体组成分析文件 Webpack 有一个非常好用的工具叫 webpack-bundle-analyzer,会自动分析包体组成结构,并以一种可视化的方式显示. 使用步骤: 打开项目,命令行输入:npm install webpack-bundle-analyzer --save-dev 命令行输入项目打包命令加--stats-json 在pac

  • 利用yarn代替npm管理前端项目模块依赖的方法详解

    本文主要给大家介绍了关于yarn代替npm管理前端项目模块依赖的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 什么是 yarn? 简单来说,yarn 是一个与 npm 功能相同的工具,用于前端项目的依赖管理.在使用 npm 的项目中,使用 npm 命令的地方都可以使用 yran 来代替. 为什么要使用 yarn 替代 npm 呢?yarn 相对 npm 来说,主要的特点有: 离线.并行安装:依赖并行安装,缓存已下载过的依赖并优先使用,各种优化使得安装依赖速度显著提升

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

随机推荐