search

web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
8.31k stars 491 forks source link

[Feature]: 内存优化需求：同个项目，分别使用webpack和rspack的开发模式运行，在rspack下占用内存显著过高 #6155

Open sunft1996 opened 3 months ago

sunft1996 commented 3 months ago

What problem does this feature solve?

环境信息

  System:
    OS: macOS 13.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 38.13 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.20.2 - /usr/local/opt/nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.19 - /usr/local/opt/nvm/versions/node/v16.20.2/bin/yarn
    npm: 8.19.4 - /usr/local/opt/nvm/versions/node/v16.20.2/bin/npm
    pnpm: 8.7.1 - /usr/local/opt/nvm/versions/node/v16.20.2/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 16.5

性能表现

rspack：

占用内存达到737MB，线程37个：

image

webpack：

占用内存达到303MB，线程13个：

image

项目配置

rspack

{
    "devtool": "eval-cheap-module-source-map",
    "profile": false,
    "resolve": {
        "modules": [
            "node_modules"
        ],
        "extensions": [
            ".ts",
            ".tsx",
            ".js",
            ".jsx",
            ".vue",
            ".less",
            ".css",
            ".json"
        ]
    },
    "output": {
        "filename": "[name].js",
        "chunkFilename": "[name].js",
        "path": "/项目路径/public/assets",
        "libraryTarget": "umd",
        "cssFilename": "[name].css",
        "cssChunkFilename": "[name].css",
        "publicPath": "/workorder/assets/"
    },
    "entry": {
        "app": "./client/index.tsx"
    },
    "devServer": {
        "allowedHosts": "all",
        "host": "0.0.0.0",
        "client": {
            "overlay": {
                "errors": true,
                "warnings": false
            },
            "progress": false
        },
        "devMiddleware": {
            "index": true,
            "writeToDisk": false,
            "stats": {
                "colors": true,
                "builtAt": true,
                "cached": true,
                "cachedAssets": true,
                "modules": false,
                "children": false
            }
        },
        "compress": true,
        "hot": true,
        "open": false,
        "static": {
            "watch": false
        },
        "port": 8080,
        "proxy": {
            "/": {
                "target": "http://127.0.0.1:7001"
            }
        }
    },
    "watchOptions": {
        "aggregateTimeout": 600,
        "ignored": [
            "**/node_modules"
        ]
    },
    "plugins": [
        {
            "name": "ProgressPlugin",
            "_options": {
                "prefix": "",
                "profile": false
            }
        },
        {
            "options": {
                "hash": true,
                "filename": "assets.json",
                "hashLength": 20,
                "prettyPrint": true,
                "srcPath": ".",
                "srcMatch": {},
                "exclude": [
                    "://"
                ],
                "assetMatch": {
                    "css": {}
                },
                "src_dynamic_pattern": {},
                "res_dynamic_pattern": {},
                "assetNameTemplate": "[name].[hash]",
                "path": "/项目路径/public/assets"
            }
        },
        {
            "options": {
                "exclude": {},
                "include": {},
                "forceEnable": false
            }
        }
    ],
    "stats": {
        "preset": "errors-only",
        "timings": true
    },
    "externals": {
        "react-dom": {
            "commonjs2": "react-dom",
            "commonjs": "react-dom",
            "amd": "react-dom",
            "umd": "react-dom",
            "root": "ReactDOM"
        },
        "react": {
            "commonjs2": "react",
            "commonjs": "react",
            "amd": "react",
            "umd": "react",
            "root": "React"
        },
        "@dt/dd-layout": {
            "commonjs2": "@dt/dd-layout",
            "commonjs": "@dt/dd-layout",
            "amd": "@dt/dd-layout",
            "umd": "@dt/dd-layout",
            "root": "BaseLayout"
        }
    },
    "mode": "development",
    "module": {
        "rules": [
            {
                "test": {},
                "type": "asset/resource"
            },
            {
                "test": {},
                "type": "css/auto"
            },
            {
                "use": [
                    {
                        "loader": "/项目路径/node_modules/less-loader/dist/cjs.js",
                        "options": {
                            "lessOptions": {
                                "strictMath": false,
                                "noIeCompat": true,
                                "javascriptEnabled": true,
                                "modifyVars": {
                                    "layout-header-background": "#fff",
                                    "font-size-base": "14px",
                                    "checkbox-size": "12px",
                                    "font-family-no-number": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
                                    "primary-color": "#4E73FF",
                                    "link-color": "#4E73FF",
                                    "success-color": "#78C757",
                                    "warning-color": "#F4A838",
                                    "error-color": "#F26C59",
                                    "heading-color": "#505568",
                                    "text-color": "#505568",
                                    "text-color-secondary": "#505568",
                                    "disabled-color": "rgba(168, 173, 189, 1)",
                                    "border-radius-base": "2px",
                                    "border-color-base": "#DCDFE6",
                                    "box-shadow-base": "0 2px 12px  0px rgba(30, 33, 47, 0.06), 0 2px 12px 0 rgba(30, 33, 47, 0.12), 0 2px 24px 0px rgba(31, 50, 82, 0.24)",
                                    "primary-color-hover": "#6A89FF",
                                    "primary-color-active": "#3858D0"
                                }
                            }
                        }
                    }
                ],
                "test": {},
                "type": "css/auto"
            },
            {
                "use": [
                    {
                        "loader": "builtin:swc-loader",
                        "options": {
                            "sourceMap": true,
                            "jsc": {
                                "parser": {
                                    "syntax": "ecmascript",
                                    "jsx": true
                                },
                                "transform": {
                                    "react": {
                                        "runtime": "classic",
                                        "development": true,
                                        "refresh": true,
                                        "pragma": "React.createElement",
                                        "pragmaFrag": "React.Fragment",
                                        "throwIfNamespace": true,
                                        "useBuiltins": false
                                    }
                                }
                            },
                            "env": {
                                "targets": {
                                    "chrome": "58",
                                    "ie": "11"
                                },
                                "mode": "usage",
                                "coreJs": "3.36.1",
                                "shippedProposals": true
                            },
                            "rspackExperiments": {
                                "import": [
                                    {
                                        "libraryName": "antd",
                                        "style": true
                                    }
                                ]
                            }
                        }
                    }
                ],
                "test": {},
                "exclude": {},
                "type": "javascript/auto"
            },
            {
                "use": [
                    {
                        "loader": "builtin:swc-loader",
                        "options": {
                            "sourceMap": true,
                            "jsc": {
                                "parser": {
                                    "syntax": "typescript",
                                    "tsx": true
                                },
                                "transform": {
                                    "react": {
                                        "runtime": "classic",
                                        "development": true,
                                        "refresh": true,
                                        "pragma": "React.createElement",
                                        "pragmaFrag": "React.Fragment",
                                        "throwIfNamespace": true,
                                        "useBuiltins": false
                                    }
                                }
                            },
                            "env": {
                                "targets": {
                                    "chrome": "58",
                                    "ie": "11"
                                },
                                "mode": "usage",
                                "coreJs": "3.36.1",
                                "shippedProposals": true
                            },
                            "rspackExperiments": {
                                "import": [
                                    {
                                        "libraryName": "antd",
                                        "style": true
                                    }
                                ]
                            }
                        }
                    }
                ],
                "test": {},
                "exclude": {},
                "type": "javascript/auto"
            }
        ]
    },
    "optimization": {
        "chunkIds": "named",
        "minimize": false,
        "splitChunks": {
            "cacheGroups": {
                "vendor": {
                    "name": "vendor",
                    "chunks": "all"
                },
                "codemirror": {
                    "name": "codemirror",
                    "test": {},
                    "chunks": "all"
                }
            }
        }
    }
}

webpack

{
    "devtool": "eval-cheap-module-source-map",
    "profile": false,
    "resolve": {
        "modules": [
            "node_modules"
        ],
        "extensions": [
            ".ts",
            ".tsx",
            ".js",
            ".jsx",
            ".vue",
            ".less",
            ".css",
            ".json"
        ]
    },
    "output": {
        "filename": "[name].js",
        "chunkFilename": "[name].js",
        "path": "/项目路径/public/assets",
        "libraryTarget": "umd",
        "publicPath": "/workorder/assets/"
    },
    "entry": {
        "app": "./client/index.tsx"
    },
    "devServer": {
        "allowedHosts": "all",
        "host": "0.0.0.0",
        "client": {
            "overlay": {
                "errors": true,
                "warnings": false
            },
            "progress": false
        },
        "devMiddleware": {
            "index": true,
            "writeToDisk": false,
            "stats": {
                "colors": true,
                "builtAt": true,
                "cached": true,
                "cachedAssets": true,
                "modules": false,
                "children": false
            }
        },
        "compress": true,
        "hot": true,
        "open": false,
        "static": {
            "watch": false
        },
        "port": 8080,
        "proxy": {
            "/": {
                "target": "http://127.0.0.1:7001"
            }
        }
    },
    "watchOptions": {
        "aggregateTimeout": 600,
        "ignored": [
            "**/node_modules"
        ]
    },
    "plugins": [
        {
            "profile": false,
            "modulesCount": 5000,
            "dependenciesCount": 10000,
            "showEntries": true,
            "showModules": true,
            "showDependencies": true,
            "showActiveModules": false
        },
        {
            "_sortedModulesCache": {},
            "options": {
                "filename": "[name].css",
                "ignoreOrder": true,
                "runtime": true,
                "chunkFilename": "[name].css"
            },
            "runtimeOptions": {
                "linkType": "text/css"
            }
        },
        {
            "options": {
                "hash": true,
                "filename": "assets.json",
                "hashLength": 20,
                "prettyPrint": true,
                "srcPath": ".",
                "srcMatch": {},
                "exclude": [
                    "://"
                ],
                "assetMatch": {
                    "css": {}
                },
                "src_dynamic_pattern": {},
                "res_dynamic_pattern": {},
                "assetNameTemplate": "[name].[hash]",
                "path": "/项目路径/public/assets"
            }
        },
        {
            "options": {
                "overlay": false,
                "exclude": {},
                "include": {}
            }
        }
    ],
    "stats": {
        "preset": "errors-only",
        "timings": true
    },
    "cache": {
        "type": "filesystem",
        "buildDependencies": {
            "config": [
                "/项目路径/fetk.config.webpack.js"
            ]
        }
    },
    "optimization": {
        "minimizer": [
            "...",
            {
                "options": {
                    "test": {},
                    "parallel": true,
                    "minimizer": {
                        "options": {}
                    }
                }
            }
        ],
        "chunkIds": "natural",
        "minimize": false,
        "splitChunks": {
            "cacheGroups": {
                "vendor": {
                    "name": "vendor",
                    "chunks": "all"
                },
                "codemirror": {
                    "name": "codemirror",
                    "test": {},
                    "chunks": "all"
                }
            }
        }
    },
    "externals": {
        "react-dom": {
            "commonjs2": "react-dom",
            "commonjs": "react-dom",
            "amd": "react-dom",
            "umd": "react-dom",
            "root": "ReactDOM"
        },
        "react": {
            "commonjs2": "react",
            "commonjs": "react",
            "amd": "react",
            "umd": "react",
            "root": "React"
        },
        "@dt/dd-layout": {
            "commonjs2": "@dt/dd-layout",
            "commonjs": "@dt/dd-layout",
            "amd": "@dt/dd-layout",
            "umd": "@dt/dd-layout",
            "root": "BaseLayout"
        }
    },
    "mode": "development",
    "module": {
        "rules": [
            {
                "test": {},
                "type": "json"
            },
            {
                "test": {},
                "enforce": "pre",
                "exclude": {},
                "loader": "/项目路径/node_modules/source-map-loader/dist/cjs.js"
            },
            {
                "test": {},
                "type": "asset/resource"
            },
            {
                "use": [
                    {
                        "loader": "/项目路径/node_modules/mini-css-extract-plugin/dist/loader.js"
                    },
                    {
                        "loader": "/项目路径/node_modules/css-loader/dist/cjs.js",
                        "options": {}
                    }
                ],
                "test": {}
            },
            {
                "use": [
                    {
                        "loader": "/项目路径/node_modules/mini-css-extract-plugin/dist/loader.js"
                    },
                    {
                        "loader": "/项目路径/node_modules/css-loader/dist/cjs.js",
                        "options": {}
                    },
                    {
                        "loader": "/项目路径/node_modules/less-loader/dist/cjs.js",
                        "options": {
                            "lessOptions": {
                                "strictMath": false,
                                "noIeCompat": true,
                                "javascriptEnabled": true,
                                "modifyVars": {
                                    "layout-header-background": "#fff",
                                    "font-size-base": "14px",
                                    "checkbox-size": "12px",
                                    "font-family-no-number": "\"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", \"Helvetica Neue\", Helvetica, Arial, sans-serif",
                                    "primary-color": "#4E73FF",
                                    "link-color": "#4E73FF",
                                    "success-color": "#78C757",
                                    "warning-color": "#F4A838",
                                    "error-color": "#F26C59",
                                    "heading-color": "#505568",
                                    "text-color": "#505568",
                                    "text-color-secondary": "#505568",
                                    "disabled-color": "rgba(168, 173, 189, 1)",
                                    "border-radius-base": "2px",
                                    "border-color-base": "#DCDFE6",
                                    "box-shadow-base": "0 2px 12px  0px rgba(30, 33, 47, 0.06), 0 2px 12px 0 rgba(30, 33, 47, 0.12), 0 2px 24px 0px rgba(31, 50, 82, 0.24)",
                                    "primary-color-hover": "#6A89FF",
                                    "primary-color-active": "#3858D0"
                                }
                            }
                        }
                    }
                ],
                "test": {}
            },
            {
                "use": [
                    {
                        "loader": "/项目路径/node_modules/babel-loader/lib/index.js",
                        "options": {
                            "presets": [
                                "/项目路径/node_modules/@babel/preset-react/lib/index.js",
                                [
                                    "/项目路径/node_modules/@babel/preset-env/lib/index.js",
                                    {
                                        "targets": {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        "useBuiltIns": "usage",
                                        "corejs": {
                                            "version": "3.36.1",
                                            "proposals": true
                                        }
                                    }
                                ]
                            ],
                            "plugins": [
                                "/项目路径/node_modules/react-refresh/babel.js",
                                {}
                            ]
                        }
                    }
                ],
                "test": {},
                "exclude": {}
            },
            {
                "use": [
                    {
                        "loader": "/项目路径/node_modules/babel-loader/lib/index.js",
                        "options": {
                            "presets": [
                                "/项目路径/node_modules/@babel/preset-react/lib/index.js",
                                [
                                    "/项目路径/node_modules/@babel/preset-env/lib/index.js",
                                    {
                                        "targets": {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        "useBuiltIns": "usage",
                                        "corejs": {
                                            "version": "3.36.1",
                                            "proposals": true
                                        }
                                    }
                                ],
                                [
                                    "/项目路径/node_modules/@babel/preset-typescript/lib/index.js",
                                    {}
                                ]
                            ],
                            "plugins": [
                                [
                                    "import",
                                    {
                                        "libraryName": "antd",
                                        "style": true
                                    }
                                ],
                                "/项目路径/node_modules/react-refresh/babel.js",
                                {}
                            ]
                        }
                    }
                ],
                "test": {},
                "exclude": {}
            }
        ]
    }
}

What does the proposed API of configuration look like?

性能提升

sunft1996 commented 3 months ago

暂时无法提供具体项目仓库，只能贴出配置作为参考

stale[bot] commented 1 month ago

This issue has been automatically marked as stale because it has not had recent activity. If this issue is still affecting you, please leave any comment (for example, "bump"). We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!