react 打包遇到的问题记录

遇到一次更新一点，没遇到就算了

react 打包遇到的问题记录
一、内存溢出
- 问题描述：
- 原因分析：
- 解决方案：
二、作为背景的图片打包后不显示
- 问题描述：
- 原因分析：
- 解决方案：
三、BrowsersListError：Unknown browser query ‘dead’
- 问题描述：
- 原因分析：
- 解决方案：

一、内存溢出

问题描述：

当引入依赖过大，或者代码行数超过10万行等打包显示堆溢出

原因分析：

问题就是原因了

解决方案：

精简代码，删除不必要或没使用的依赖
修改打包指令，package.json中增加以下配置

–max-old-space-size=4096

"scripts": {"build": "node -max-old-space-size=4096 scripts/build.js",},

二、作为背景的图片打包后不显示

问题描述：

开发环境图片显示正常，打包也成功了，放到服务器上图片找不到

原因分析：

图片过大，url-loader默认文件大小为无限制，但是react的webpack配置里有有限制，默认选择Node环境变量里配置的IMAGE_INLINE_SIZE_LIMIT，未定义时设置为10000字节。当你的图片大小超过10000，就没办法转换为base64格式了，得改limit。但是一般的图片大小也不会超过10000。但是吧，当时我那项目就是有几个超过限制的图片，没办法就改配置咯，改了个两万够了。

解决方案：

三、BrowsersListError：Unknown browser query ‘dead’

问题描述：

打包就报 BrowsersListError：Unknown browser query ‘dead’ at Array.forEach... css啥的也没错

原因分析：

估计是我项目的一些依赖版本太低了

解决方案：

修改或者删除package.json 里 browserslist配置，我的项目里压根没有这个 browserslist
修改添加 browserslist到webpack.config.js 里，试了没用…
修改webpack.config.js 里 css-loader 最小化配置 true => false 有用！
我以为是css-loader 版本（0.28.7）太低的问题（别问我为嘛这么低，公司老项目我能怎么办），升级了@3.4.2，然后发现新一点的css-loader 版本移除了 minimize ，删掉，打包就成功了

解决描述链接

react 打包遇到的问题记录相关推荐

Vue、React打包文件放在服务器，浏览器存在缓存问题的解决
Vue.React打包文件放在服务器,浏览器存在缓存问题的解决参考文章: (1)Vue.React打包文件放在服务器,浏览器存在缓存问题的解决 (2)https://www.cnblogs.com/ ...
vue、react打包app
Vue打包app 本地打包测试 1.http-server是一个基于node.js的简单的,零配置的命令行http服务器. 安装:npm install http-server -g 使用:http- ...
打包分包工具流程记录
流程记录: 开始打包AB 1. 收集需要打包的资源路径收集资源逻辑抽离出来做成Mgr,收集的资源用字典存取,键值为资源路径.(用IO流的DirectoryInfo.GetFileSystemInfo ...
IDEA配置使用mvnd打包的采坑记录（无废话版）
IDEA配置使用mvnd打包的采坑记录(无废话版) 此处不赘述mvnd的作用了,比maven打包快很多可参考 https://blog.csdn.net/m4330187/article/detai ...
react打包后图片丢失_手搭一个 React，Typescript，Koa，GraphQL 环境
本文系原创,转载请附带作者信息:yhlben 项目地址:https://github.com/yhlben/cdfang-spider 前言在实际的开发过程中,从零开始初始化一个项目往往很麻烦,所以 ...
Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式在nginx配置中添加如下 ...
react打包后图片丢失_如何快速构建React组件库
俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险〜目前团队内已经有较为成熟的 Vue 技术栈的 ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
react打包后图片丢失_React中型项目的优化实践
本文可能涉及的内容-- 项目介绍整个项目大概有60+个页面,用到的组件大概150+,package里面的依赖大概有70+个,应该勉强算得上是一个中型的React的项目了. 下面给大家看看我们现在bu ...

react 打包遇到的问题记录

react 打包遇到的问题记录

目录

一、内存溢出

问题描述：

原因分析：

解决方案：

二、作为背景的图片打包后不显示

问题描述：

原因分析：

解决方案：

三、BrowsersListError：Unknown browser query ‘dead’

问题描述：

原因分析：

解决方案：

react 打包遇到的问题记录相关推荐

最新文章

热门文章