rspack
rspack copied to clipboard
Published
20 hours ago •
web-infra-dev
web-infra-dev
[Feature]: 内存优化需求：同个项目，分别使用webpack和rspack的开发模式运行，在rspack下占用内存显著过高
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个：
webpack：
占用内存达到303MB，线程13个：
项目配置
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?
性能提升
