create-react-app 如何使用这个构建时间来优化这个问题?

332nm8kg  于 22天前  发布在  React
关注(0)|答案(6)|浏览(20)

我的项目是用antD和CRA构建的。但是现在打包速度越来越慢了。我使用speed-measure-webpack-plugin分析构建时间,得到了以下信息:

E:\WinProject\retail-platform>yarn build
yarn run v1.22.5
$ npm-run-all build-css build-js
$ node-less-chokidar src
err [LessError: Unrecognised input] {
  stack: undefined,
  type: 'Parse',
  filename: 'E:\\WinProject\\retail-platform\\node_modules\\base\\index.js',
  index: 0,
  line: 1,
  column: 0,
  callLine: NaN,
  callExtract: undefined,
  extract: [ undefined, "'use strict';", '' ]
}
Wrote 55 CSS files to E:\WinProject\retail-platform\src
$ react-app-rewired --max_old_space_size=5120 build
Creating an optimized production build...
Build completed in 798.15s


 SMP  ⏱
General output time took 13 mins, 18.16 secs

 SMP  ⏱  Plugins
TerserPlugin took 3 mins, 17.46 secs
IgnorePlugin took 2 mins, 40.46 secs
ProgressPlugin took 18.74 secs
OptimizeCssAssetsWebpackPlugin took 9.55 secs
MiniCssExtractPlugin took 0.669 secs
ManifestPlugin took 0.516 secs
HtmlWebpackPlugin took 0.322 secs
GenerateSW took 0.101 secs
InlineChunkHtmlPlugin took 0.081 secs
DefinePlugin took 0.062 secs
InterpolateHtmlPlugin took 0.056 secs
ModuleNotFoundPlugin took 0.05 secs

 SMP  ⏱  Loaders
babel-loader, and
eslint-loader took 7 mins, 12.77 secs
  module count = 1617
babel-loader took 5 mins, 18.64 secs
  module count = 3752
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 3 mins, 9.078 secs
  module count = 96
css-loader, and
postcss-loader, and
resolve-url-loader, and
less-loader took 2 mins, 17.21 secs
  module count = 96
modules with no loaders took 21.93 secs
  module count = 61
url-loader took 1.97 secs
  module count = 4
file-loader took 1.006 secs
  module count = 4
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 0.558 secs
  module count = 1
css-loader, and
postcss-loader took 0.449 secs
  module count = 1
html-webpack-plugin took 0.018 secs
  module count = 1


Compiled successfully.

我使用customize-cra覆盖了一些webpack配置,如下所示:

config-overrides.js,

/** @format */
const {
    override,
    fixBabelImports,
    addLessLoader,
    useEslintRc,
    addWebpackAlias,
    addWebpackExternals,
    addDecoratorsLegacy,
    addWebpackPlugin,
} = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const path = require('path');
module.exports = smp.wrap(override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addDecoratorsLegacy(),
    addWebpackExternals({
        xlsx: 'XLSX',
        'ReactDataGrid': 'react-data-grid',
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@form-item-margin-bottom': '10px',
                '@text-color': '#000',
                '@item-hover-bg': 'rgb(56, 154, 229)',
                '@item-active-bg': 'rgb(56, 154, 229)',
                '@select-item-selected-bg': 'rgb(56, 154, 229)',
                '@select-item-active-bg': 'rgb(56, 154, 229)',

                '@layout-footer-padding': '0px',
                '@layout-header-height': '50px',
                '@layout-sider-background': '#242e38',
                '@layout-trigger-background': '#286abc',
                '@layout-header-padding': '0 25px',

                '@tabs-card-height': '25px',
                '@tabs-bar-margin': '0 0 8px 0',
                '@tabs-active-color': 'white',

                '@btn-height-base': '25px',
                '@list-item-padding': '3px 0',

                '@card-padding-base': '5px',
                '@card-padding-wider': '5px',
                '@card-head-padding': '5px',
                '@card-head-height': '30px',

                '@table-header-sort-bg': '#1890ff',
                '@table-header-icon-color': '#f5f5f5',
                '@table-row-hover-bg': 'rgb(122, 191, 255)',
                '@table-padding-vertical': '5px',
                '@table-padding-horizontal': '10px',

                '@input-height-base': '25px',
                '@border-color-base': '#5ba8e4',
                '@menu-dark-bg': '#242e38',
                '@menu-dark-submenu-bg': '#242e38',
                '@menu-dark-item-active-bg': '#286abc',
                '@select-border-color': '#d9d9d9',
            },
        },
    }),
    addWebpackPlugin(new ProgressBarPlugin()),
    addWebpackAlias({
        ['@']: path.resolve(__dirname, 'src'),
    }),
    // eslint-disable-next-line
    useEslintRc('.eslintrc.js'),
));

我的package.json:

{
    "name": "xxx",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@ant-design/icons": "latest",
        "@antv/data-set": "^0.11.7",
        "antd": "^4.14.1",
        "axios": "^0.21.1",
        "bizcharts": "^3.5.8",
        "classnames": "^2.2.6",
        "compressorjs": "^1.0.6",
        "decimal.js-light": "^2.5.1",
        "file-saver": "^2.0.2",
        "immer": "^9.0.0",
        "immutability-helper": "^3.1.1",
        "less": "^4.1.0",
        "lodash": "^4.17.20",
        "moment": "^2.29.1",
        "prop-types": "^15.7.2",
        "qrcode.react": "^1.0.0",
        "react": "^16.14.0",
        "react-color": "^2.19.3",
        "react-copy-to-clipboard": "^5.0.2",
        "react-data-grid-addons": "^6.1.0",
        "react-dnd": "^11.1.3",
        "react-dnd-html5-backend": "^11.1.3",
        "react-document-title": "^2.0.3",
        "react-dom": "^16.14.0",
        "react-hot-keys": "^2.6.0",
        "react-loadable": "^5.5.0",
        "react-resizable": "^1.11.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "3.4.3",
        "react-use": "^17.2.1",
        "react-webcam": "^5.2.1",
        "react-window": "^1.8.5",
        "resize-observer-polyfill": "latest",
        "store": "^2.0.12",
        "use-immer": "^0.5.1",
        "wolfy87-eventemitter": "^5.2.9"
    },
    "scripts": {
        "analyze": "source-map-explorer build/static/js/*.js",
        "build-css": "node-less-chokidar src",
        "watch-css": "npm run build-css && node-less-chokidar src --watch --recursive",
        "start-js": "react-app-rewired start",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "react-app-rewired --max_old_space_size=5120 build",
        "build": "npm-run-all build-css build-js",
        "test": "react-app-rewired test --env=jsdom",
        "eject": "react-scripts eject"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "devDependencies": {
        "@ant-design/compatible": "^1.0.8",
        "babel-plugin-import": "^1.13.1",
        "babel-preset-latest": "^6.24.1",
        "customize-cra": "^1.0.0",
        "eslint-plugin-react": "^7.21.4",
        "eslint-plugin-react-hooks": "^4.1.2",
        "husky": "^5.2.0",
        "less-loader": "^7.0.2",
        "lint-staged": "^10.4.0",
        "node-less-chokidar": "^0.4.1",
        "npm-run-all": "^4.1.5",
        "path-to-regexp": "^6.2.0",
        "prettier": "^2.2.1",
        "progress-bar-webpack-plugin": "^2.1.0",
        "react-app-rewired": "^2.1.8",
        "react-data-grid": "^6.1.0",
        "source-map-explorer": "^2.5.0",
        "speed-measure-webpack-plugin": "^1.5.0"
    },  
    "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
    ]
}

如您所见,构建速度太慢了,我想让它变快,谢谢。

csbfibhn

csbfibhn1#

与其他软件包相比,create-react-app已经是相当慢的了。但这还更糟糕。

hwazgwia

hwazgwia2#

这个问题已经被自动标记为过时,因为它没有任何最近的活动。如果没有发生任何进一步的活动,它将在5天后被关闭。

xxb16uws

xxb16uws4#

这个问题已经被自动标记为过时,因为它没有任何最近的活动。如果没有发生任何进一步的活动,它将在5天后被关闭。

lskq00tm

lskq00tm5#

这个问题解决了吗?

相关问题