排查create

2024-04-08 15:50| 来源: 网络整理| 查看: 265

最近项目npm run build的速度越来越慢，开始找寻解决方式。

node包有646.8 MB大小。

package.json如下

{ "name": "www", "version": "0.1.0", "private": true, "dependencies": { "antd": "^4.1.0", "braft-editor": "^2.3.9", "connected-react-router": "^6.5.2", "echarts": "^4.7.0", "history": "^4.10.1", "lodash": "^4.17.15", "moment": "^2.26.0", "prop-types": "^15.7.2", "react": "^16.10.2", "react-dom": "^16.10.2", "react-redux": "^7.1.1", "react-router": "^5.1.2", "react-router-dom": "^5.1.2", "react-scripts": "3.2.0", "react-transition-group": "^4.3.0", "react-virtualized": "^9.21.2", "redux": "^4.0.4", "redux-thunk": "^2.3.0", "rsuite": "^3.8.13", "video-react": "^0.14.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts --max_old_space_size=4096 build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "babel-plugin-react-transform": "^3.0.0", "eslint-plugin-react-hooks": "^2.1.2", "node-sass": "^4.13.1", "react-catch-errors": "^1.1.2", "react-sortablejs": "^2.0.11", "sass-loader": "^8.0.0" } }

大体看下来也没多少内容。

新建了demo,copy一样的package.json，build速度是快速的，前提是没有多好打包的js或者css,所以需要查看一下项目里打包的css和js。

线上的有超过10个文件。复制的src的内容到新的demo中，build,需要等很久。看来是引入有些问题。

排查一：

import Tagmanage from 'components/Tagmanage'和const Tagmanage = lazy(() => import('components/Tagmanage'))引入的文件是否有关，结果，打包的速度都是01:37,所以和引入路径无关。

排查二：

redux,无效

排查三：

优化点，扩展 Create React App 的 Webpack 配置,关闭source-map:

**source-map作用：**当文件中有错误时，且使用的模式是production，打包后的文件是压缩的形式，不好定位找到错误的位置。而source-map就是一个映射文件，点进去看到的错误是源码，而不是压缩后的格式，方便调试。

目前项目，设置config.devtool = false;,打包时间04:33.86;

设置config.devtool = source-map;,打包时间06:54.96;

2020.08.17build时间

"build:tests": "react-scripts build", :npm run build:tests :01:59 "build:tests": "react-app-rewired build", :npm run build:tests :01:30 "build:tests": "react-app-rewired --max_old_space_size=4096 build",:npm run build:tests :01:30 结论

项目开发内容越多，会导致build越来越慢，关闭mapSource, 进一步优化吧～

参考文档：

如何扩展 Create React App 的 Webpack 配置玩转 webpack，使你的打包速度提升 90% Webpack打包构建太慢了？试试几个方法升级成webpack4吧（Create React App）拒绝使用eject，自定义webpack配置

【本文地址】

公司简介

联系我们