craco + webpack 4 升 5

craco + webpack 4 升 5

  • 更新包版本
  • 尝试build
  • 升级其他依赖库
  • 使用process插件打印进度信息
  • 到底需要多少内存
  • 分析构建产出
  • 添加 splitChunk
  • 总结
      • 记录一些好文章:

我的项目使用 craco + react 开发
我的 package.json

{// ......"dependencies": {"@ant-design/icons": "^4.7.0","antd": "^4.17.2","react": "^17.0.2","react-dom": "^17.0.2"},"devDependencies": {"@craco/craco": "^6.1.1","react-scripts": "^4.0.3"}
}

想要升级到 webpack 5,此篇blog记录升级过程。

更新包版本

  • 直接 npm install webpack@latest

尝试build

  • 执行 npm run build
    报错出现:
    在这里插入图片描述
  • 按报错信息尝试使用 export SKIP_PREFLIGHT_CHECK=true && npm run build
    还是报错:在这里插入图片描述

升级其他依赖库

  • 那就老老实实的升级一下 npm install react-scripts@latest
    有一些warn, 但是不要紧
    在这里插入图片描述

  • 再次执行build,npm run build
    执行了很长时间,然后报错,内存直接超了
    在这里插入图片描述

  • 尝试把内存开到 8G , npm run build --max-old-space-size=8000 ,还是一样报错

    我的虚拟机只有8G内存,极限了。而且不应该呀,编译怎么需要这么多内存

使用process插件打印进度信息

webpack 自带了ProgressPlugin, 加到 craco.config.js

const webpack = require('webpack');function configureWebpack(webpackConfig, {env, paths}) {const processPlugin = new webpack.ProgressPlugin({activeModules: false,entries: true,handler(percentage, message, ...args) {console.info(percentage, message, ...args);},modules: true,});webpackConfig.plugins.push(processPlugin);return webpackConfig;
}module.exports = {webpack: {configure: configureWebpack,},
};
  • 再执行 npm run build, 就可以看到进度信息:
    在这里插入图片描述
    发现:

    1. TerserPlugin:执行了非常久。 这是一个代码压缩插件,webpack v5 开箱即带,应该没有问题。
    2. 在SourceMapDevToolPlugin 阶段报错。SourceMap 就是一个信息文件,里面储存着代码的位置信息。 这种文件主要用于开发调试,现在代码都会经过压缩混淆,这样报错提示会很难定位代码。 通过SourceMap 能快速定位到源代码,并进行调试。 通常情况SourceMap 在开发环境开启,线上环境关闭。
  • 修改craco.config.js,不执行source map,将 devtool 改为undefined,重试。 果然成功。

function configureWebpack(webpackConfig, {env, paths}) {//   ......   省略webpackConfig.devtool = undefined;return webpackConfig;
}

到底需要多少内存

虽然上线已经成功了,但是这样不是办法,source_map在开发阶段是必须的。我们还是要彻底解决这个问题。
首先,我们来验证一下 是内存真的不够大还是有内存溢出的BUG,我找了一个大内存的机器试了一下,还真能跑通,npm内存使用最高时达到 12G
网上查了各种资料没有说webpack5会使用这么大的内存。都是说webpack5打包更小更快。
结果我的又慢又占内存,build结果更大。

分析构建产出

使用webpack-bundle-analyzer插件,分析build结果,
配置方法参考: https://www.jianshu.com/p/77c0b68c9f13

  • 老环境效果:
    在这里插入图片描述

  • 新环境效果
    在这里插入图片描述

发现 新的构建产出中, 每个入口文件(这个项目是多页应用)都用很多modules, 而老的构建中则没有。
点击左上角箭头,展开concatenated :
在这里插入图片描述
效果:
在这里插入图片描述

发现这些都是基础antd组件。

结论:新构建没有将公共依赖库分离。

添加 splitChunk

代码分离 splitChunk 是非常常用的优化方式,webpack4开始就已经可以直接使用:https://webpack.docschina.org/plugins/split-chunks-plugin/

不清楚为什么升级之后就没有这个参数了,打印craco最终的webpack_conf看一下,

function configureWebpack(webpackConfig, {env, paths}) {//   ......   省略console.log(webpackConfig);return webpackConfig;
}

果然少了splitChunk插件。

老环境输出新环境输出
在这里插入图片描述在这里插入图片描述

那就自己加上吧:

function configureWebpack(webpackConfig, {env, paths}) {//   ......   省略webpackConfig.optimization.splitChunks = {chunks: 'all',name: false};console.log(webpackConfig);return webpackConfig;
}

重试 npm run build,之前的问题全部解决:
速度 3min -> 2min, 大小 70 -> 2, 内存 12g -> 1.2g

总结

  • react-scripts 的这一版升级,有点坑呀,这么重要的插件都没有装。
  • 不过这个splitChunk插件尽然能有如此大的提升,确实出乎意料。
  • 分析一下 应该是生成source_map的过程会很慢,很占内存。开启chunk后,单个chunk变小,也少了很多重复编译,所以快了。
  • webpack4 升 5本身的成本较低,几乎不用修改。

记录一些好文章:

  • 前端工程化学习笔记:https://static.kancloud.cn/cyyspring/webpack/1857794
  • webpack性能优化方案: https://yejiwei.com/post/98
  • webpack性能优化(2):splitChunks用法详解: https://zhuanlan.zhihu.com/p/615064733

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/197807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

沐风老师3DMAX拼图随机生成器Puzzle建模工具使用教程

3DMAX拼图随机生成器Puzzle建模工具使用教程 3DMAX拼图随机生成器Puzzle,是一款用MAXScript脚本语言开发的3dsMax小工具,可以随机创建可编辑多边形3D拼图对象。可批量生成阵列。 【适用版本】 3dMax2015-2024(不仅限于此范围) 【…

[算法思考记录]力扣1094.拼车JavaScript

Problem: 1094. 拼车 相当于在一条路上开车,乘客在某个时间点上车,他们会影响在下车之前的路程的车载人数。 很明显这是差分的做法,只要把行车的路程抽象成一个差分数组,把上下车抽象成区间更改,一切都变得简单 Code…

前端大文件上传webuploader(react + umi)

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件。 分片上传 1.什么是分片上传 分片上传,就是将所要上传的文件,按照一定的大小,将…

Langchain-Chatchat的安装过程

参考:LLMs之RAG:LangChain-Chatchat(一款中文友好的全流程本地知识库问答应用)的简介(支持 FastChat 接入的ChatGLM-2/LLaMA-2等多款主流LLMs多款embe_一个处女座的程序猿的博客-CSDN博客 1、安装过程中出现了 GPU驱动版本 是11.8 而 python -c "…

探索人工智能领域——每日20个名词详解【day8】

目录 前言 正文 总结 🌈嗨!我是Filotimo__🌈。很高兴与大家相识,希望我的博客能对你有所帮助。 💡本文由Filotimo__✍️原创,首发于CSDN📚。 📣如需转载,请事先与我联系以…

学习使用三个命令实现在腾讯云服务器TencentOS Server 3.1或者CentOS 8上安装ffmpeg

学习使用三个命令实现在腾讯云服务器TencentOS Server 3.1或者CentOS 8上安装ffmpeg Error: Unable to find a match: ffmpeg添加RPMfusion仓库安装SDL安装ffmpeg执行命令测试 Error: Unable to find a match: ffmpeg 添加RPMfusion仓库 yum install https://download1.rpmfus…

Vue3动态表单

示例代码如下: // 引入需要的依赖包 import { ref, reactive } from vue; import { useForm } from /composables/useForm;// 定义表单数据模型 const formModel reactive({name: ,age: ,gender: , });// 使用自定义的useForm函数创建表单实例 const { register, …

[Java学习日记]多线程练习、线程池

目录 一.案例:五个人抢红包 二.案例:两个抽奖池抽奖 三.案例:两个抽奖池抽奖:获取线程运行的结果 四.线程池:用来存放线程,避免多次重复创建线程 五.自定义线程池 六.最大并行数与线程池大小 一.案例&…

Python核心编程之认识python中的数字

目录 一、数字类型 如何创建数值对象并用其赋值 (数字对象) 如何更新数字对象

PTA 7-237 特殊排序

输入一个整数n和n个各不相等的非负整数&#xff0c;将这些整数从小到大进行排序&#xff0c;要求奇数在前&#xff0c;偶数在后。 输入格式: 首先输入一个正整数T&#xff0c;表示测试数据的组数&#xff0c;然后是T组测试数据。每组测试先输入一个整数n(1<n<100)&…

记录33333

如果您在一台从服务器上将 backend_flag0 设置为 DISALLOW_TO_FAILOVER&#xff0c;则意味着这台从服务器不会接管主服务器的角色&#xff0c;即不会成为新的主服务器&#xff0c;也不会参与故障切换。这种配置可能会影响环境的高可用性和故障恢复。以下是一个示例以更好地理解…

三端多人游戏冰雪搭建教程

--------------------------------------------------------------------------------------------------- CENTOS7系列 --------------------------------------------------------------------------------------------------- 安装宝塔 yum install -y wget && …

前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件

如果想在React中想要像Vue一样把css和js写到一个文件中&#xff0c;可以使用CSS-in-JS。 使用CSS-in-JS 下载 npm i styled-components使用 就像写scss一样&#xff0c;不过需要声明元素的类型 基本语法及展示如下 import styled from "styled-components"expor…

【EI会议征稿】第九届电气、电子和计算机工程研究国际学术研讨会 (ISAEECE 2024)

第九届电气、电子和计算机工程研究国际学术研讨会 (ISAEECE 2024) 2024 9th International Symposium on Advances in Electrical, Electronics and Computer Engineering 第九届电气、电子和计算机工程研究国际学术研讨会(ISAEECE 2024&#xff09;将于2024年3月1-5日在南京…

AWS攻略——创建VPC

文章目录 创建一个可以外网访问的VPCCIDR主路由表DestinationTarget 主网络ACL入站规则出站规则 子网创建EC2测试连接创建互联网网关&#xff08;IGW&#xff09;编辑路由表 知识点参考资料 在 《AWS攻略——VPC初识》一文中&#xff0c;我们在AWS默认的VPC下部署了一台可以SS…

鸿蒙4.0开发笔记之ArkTS装饰器语法基础之监听者模式@Watch案例讲解(十四)

1、Watch定义 Watch实际是指状态变量更改通知。如果开发者需要关注某个状态变量的值是否改变&#xff0c;可以使用Watch为状态变量设置回调函数&#xff08;监听函数&#xff09;。 Watch用于监听状态变量的变化&#xff0c;当状态变量变化时&#xff0c;Watch的回调方法将被…

JAVA代码优化:Token验证处理

简述&#xff1a; Token验证处理是指在客户端和服务端之间进行身份验证和授权的过程。在这个过程中&#xff0c;客户端通常会提供一个令牌&#xff08;Token&#xff09;&#xff0c;用于证明其合法性和权限。服务端接收到该令牌后&#xff0c;需要对其进行验证&#xff0c;以…

隐写术和人工智能

在一项新的研究中&#xff0c;人工智能对齐研究实验室 Redwood Research 揭示了大型语言模型 (LLM) 可以掌握“编码推理”&#xff0c;这是一种隐写术形式。 这种有趣的现象使得大型语言模型能够以人类读者无法理解的方式巧妙地将中间推理步骤嵌入到生成的文本中。 大型语言…

java版王者荣耀

1.主要功能 键盘W,A,S,D键&#xff1a;控制玩家上下左右移动。按钮一&#xff1a;控制英雄发射一个矩形攻击红方小兵。按钮二&#xff1a;控制英雄发射魅惑技能&#xff0c;伤害小兵并让小兵停止移动。技能三&#xff1a;攻击多个敌人并让小兵停止移动。普攻&#xff1a;对小兵…

C++初阶 | [七] string类(上)

摘要&#xff1a;标准库中的string类的常用函数 C语言中&#xff0c;字符串是以\0结尾的一些字符的集合&#xff0c;为了操作方便&#xff0c;C标准库中提供了一些str系列的库函数&#xff0c; 但是这些库函数与字符串是分离开的&#xff0c;不太符合OOP(面向对象)的思想&#…