diff --git a/.changeset/rare-wolves-tease.md b/.changeset/rare-wolves-tease.md
new file mode 100644
index 000000000000..b38d89c4f92b
--- /dev/null
+++ b/.changeset/rare-wolves-tease.md
@@ -0,0 +1,10 @@
+---
+'@modern-js/builder-shared': patch
+'@modern-js/builder': patch
+'@modern-js/utils': patch
+'@modern-js/core': patch
+---
+
+feat(builder): support inline assets by file size
+
+feat(builder): 支持基于文件体积来内联资源
diff --git a/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap b/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap
index 12943f070ef8..b59a7a8095ab 100644
--- a/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap
+++ b/packages/builder/builder-rspack-provider/tests/plugins/__snapshots__/default.test.ts.snap
@@ -1493,9 +1493,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when prod
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [
+      "scriptTests": [
         /builder-runtime\\(\\[\\.\\]\\.\\+\\)\\?\\\\\\.js\\$/,
       ],
+      "styleTests": [],
     },
   ],
   "resolve": {
diff --git a/packages/builder/builder-shared/src/mergeBuilderConfig.ts b/packages/builder/builder-shared/src/mergeBuilderConfig.ts
index 985851638333..0594f3503f00 100644
--- a/packages/builder/builder-shared/src/mergeBuilderConfig.ts
+++ b/packages/builder/builder-shared/src/mergeBuilderConfig.ts
@@ -1,4 +1,5 @@
 import _ from '@modern-js/utils/lodash';
+import { isOverriddenConfigKey } from '@modern-js/utils';
 
 export const mergeBuilderConfig = <T>(...configs: T[]): T =>
   _.mergeWith(
@@ -11,8 +12,8 @@ export const mergeBuilderConfig = <T>(...configs: T[]): T =>
         return undefined;
       }
 
-      // always use source override target, if target defined.
-      if (['removeConsole'].includes(key)) {
+      // Some keys should use source to override target
+      if (isOverriddenConfigKey(key)) {
         return source ?? target;
       }
 
diff --git a/packages/builder/builder-shared/src/plugins/InlineChunkHtmlPlugin.ts b/packages/builder/builder-shared/src/plugins/InlineChunkHtmlPlugin.ts
index 3dc4e00d4485..9a1ebbdc512e 100644
--- a/packages/builder/builder-shared/src/plugins/InlineChunkHtmlPlugin.ts
+++ b/packages/builder/builder-shared/src/plugins/InlineChunkHtmlPlugin.ts
@@ -6,15 +6,22 @@
  * modified from https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/InlineChunkHtmlPlugin.js
  */
 import { join } from 'path';
-import { isString } from '@modern-js/utils';
+import { isFunction, isString } from '@modern-js/utils';
 import { addTrailingSlash } from '../utils';
 import type { Compiler, Compilation } from 'webpack';
 import type HtmlWebpackPlugin from 'html-webpack-plugin';
 import type { HtmlTagObject } from 'html-webpack-plugin';
 import { COMPILATION_PROCESS_STAGE, getPublicPathFromCompiler } from './util';
 
+export type InlineChunkTestFunction = (params: {
+  size: number;
+  name: string;
+}) => boolean;
+export type InlineChunkTest = RegExp | InlineChunkTestFunction;
+
 export type InlineChunkHtmlPluginOptions = {
-  tests: RegExp[];
+  styleTests: InlineChunkTest[];
+  scriptTests: InlineChunkTest[];
   distPath: {
     js?: string;
     css?: string;
@@ -24,7 +31,9 @@ export type InlineChunkHtmlPluginOptions = {
 export class InlineChunkHtmlPlugin {
   name: string;
 
-  tests: RegExp[];
+  styleTests: InlineChunkTest[];
+
+  scriptTests: InlineChunkTest[];
 
   distPath: InlineChunkHtmlPluginOptions['distPath'];
 
@@ -34,10 +43,11 @@ export class InlineChunkHtmlPlugin {
 
   constructor(
     htmlPlugin: typeof HtmlWebpackPlugin,
-    { tests, distPath }: InlineChunkHtmlPluginOptions,
+    { styleTests, scriptTests, distPath }: InlineChunkHtmlPluginOptions,
   ) {
     this.name = 'InlineChunkHtmlPlugin';
-    this.tests = tests;
+    this.styleTests = styleTests;
+    this.scriptTests = scriptTests;
     this.distPath = distPath;
     this.inlinedAssets = new Set();
     this.htmlPlugin = htmlPlugin;
@@ -80,6 +90,16 @@ export class InlineChunkHtmlPlugin {
     return source;
   }
 
+  matchTests(name: string, source: string, tests: InlineChunkTest[]) {
+    return tests.some(test => {
+      if (isFunction(test)) {
+        const size = source.length;
+        return test({ name, size });
+      }
+      return test.exec(name);
+    });
+  }
+
   getInlinedScriptTag(
     publicPath: string,
     tag: HtmlTagObject,
@@ -87,21 +107,25 @@ export class InlineChunkHtmlPlugin {
   ) {
     const { assets } = compilation;
 
+    // No need to inline scripts with src attribute
     if (!(tag?.attributes.src && isString(tag.attributes.src))) {
       return tag;
     }
+
     const { src, ...otherAttrs } = tag.attributes;
     const scriptName = publicPath ? src.replace(publicPath, '') : src;
 
-    if (!this.tests.some(test => test.exec(scriptName))) {
-      return tag;
-    }
+    // If asset is not found, skip it
     const asset = assets[scriptName];
     if (asset == null) {
       return tag;
     }
 
     const source = asset.source().toString();
+    const shouldInline = this.matchTests(scriptName, source, this.scriptTests);
+    if (!shouldInline) {
+      return tag;
+    }
 
     const ret = {
       tagName: 'script',
@@ -130,6 +154,7 @@ export class InlineChunkHtmlPlugin {
   ) {
     const { assets } = compilation;
 
+    // No need to inline styles with href attribute
     if (!(tag.attributes.href && isString(tag.attributes.href))) {
       return tag;
     }
@@ -138,13 +163,18 @@ export class InlineChunkHtmlPlugin {
       ? tag.attributes.href.replace(publicPath, '')
       : tag.attributes.href;
 
-    if (!this.tests.some(test => test.exec(linkName))) {
+    // If asset is not found, skip it
+    const asset = assets[linkName];
+    if (asset == null) {
       return tag;
     }
 
-    const asset = assets[linkName];
-
     const source = asset.source().toString();
+    const shouldInline = this.matchTests(linkName, source, this.styleTests);
+    if (!shouldInline) {
+      return tag;
+    }
+
     const ret = {
       tagName: 'style',
       innerHTML: this.updateSourceMappingURL({
diff --git a/packages/builder/builder-shared/src/plugins/index.ts b/packages/builder/builder-shared/src/plugins/index.ts
index c567132257f9..daba5ecab32f 100644
--- a/packages/builder/builder-shared/src/plugins/index.ts
+++ b/packages/builder/builder-shared/src/plugins/index.ts
@@ -5,7 +5,10 @@ export { HtmlCrossOriginPlugin } from './HtmlCrossOriginPlugin';
 export { HtmlNoncePlugin } from './HtmlNoncePlugin';
 export { HtmlAppIconPlugin } from './HtmlAppIconPlugin';
 export { HtmlFaviconUrlPlugin, type FaviconUrls } from './HtmlFaviconUrlPlugin';
-export { InlineChunkHtmlPlugin } from './InlineChunkHtmlPlugin';
+export {
+  InlineChunkHtmlPlugin,
+  type InlineChunkTest,
+} from './InlineChunkHtmlPlugin';
 export { AssetsRetryPlugin } from './AssetsRetryPlugin';
 export { CheckSyntaxPlugin } from './CheckSyntaxPlugin';
 export { HtmlNetworkPerformancePlugin } from './HtmlNetworkPerformancePlugin';
diff --git a/packages/builder/builder-shared/src/schema/output.ts b/packages/builder/builder-shared/src/schema/output.ts
index ac68a282097a..a61a37c09e51 100644
--- a/packages/builder/builder-shared/src/schema/output.ts
+++ b/packages/builder/builder-shared/src/schema/output.ts
@@ -77,6 +77,12 @@ export const SvgDefaultExportSchema: ZodType<SvgDefaultExport> = z.enum([
   'url',
 ]);
 
+const inlineSchema = z.union([
+  z.boolean(),
+  z.instanceof(RegExp),
+  z.anyFunction(),
+]);
+
 export const sharedOutputConfigSchema = z.partialObj({
   distPath: DistPathConfigSchema,
   filename: FilenameConfigSchema,
@@ -100,8 +106,8 @@ export const sharedOutputConfigSchema = z.partialObj({
   enableAssetFallback: z.boolean(),
   enableLatestDecorators: z.boolean(),
   enableCssModuleTSDeclaration: z.boolean(),
-  enableInlineScripts: z.union([z.boolean(), z.instanceof(RegExp)]),
-  enableInlineStyles: z.union([z.boolean(), z.instanceof(RegExp)]),
+  enableInlineScripts: inlineSchema,
+  enableInlineStyles: inlineSchema,
   externals: z.any(),
   overrideBrowserslist: z.union([
     z.array(z.string()),
diff --git a/packages/builder/builder-shared/src/types/config/output.ts b/packages/builder/builder-shared/src/types/config/output.ts
index 4c5b422b855c..b059ed49b7d8 100644
--- a/packages/builder/builder-shared/src/types/config/output.ts
+++ b/packages/builder/builder-shared/src/types/config/output.ts
@@ -1,3 +1,4 @@
+import type { InlineChunkTest } from '../../plugins/InlineChunkHtmlPlugin';
 import type { BuilderTarget } from '../builder';
 import type { CrossOrigin } from './html';
 import type { Externals } from 'webpack';
@@ -261,11 +262,11 @@ export interface SharedOutputConfig {
   /**
    * Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
    */
-  enableInlineScripts?: boolean | RegExp;
+  enableInlineScripts?: boolean | InlineChunkTest;
   /**
    * Whether to inline output style files (.css files) into html with `<style>` tags.
    */
-  enableInlineStyles?: boolean | RegExp;
+  enableInlineStyles?: boolean | InlineChunkTest;
   /**
    * Specifies the range of target browsers that the project is compatible with.
    * This value will be used by [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) and
@@ -300,8 +301,8 @@ export interface NormalizedSharedOutputConfig extends SharedOutputConfig {
   enableAssetFallback: boolean;
   enableLatestDecorators: boolean;
   enableCssModuleTSDeclaration: boolean;
-  enableInlineScripts: boolean | RegExp;
-  enableInlineStyles: boolean | RegExp;
+  enableInlineScripts: boolean | InlineChunkTest;
+  enableInlineStyles: boolean | InlineChunkTest;
   svgDefaultExport: SvgDefaultExport;
   cssModules: {
     exportLocalsConvention: CssModuleLocalsConvention;
diff --git a/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap b/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap
index 38c3a03658e1..de811eeae603 100644
--- a/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap
+++ b/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap
@@ -1833,9 +1833,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [
+      "scriptTests": [
         /builder-runtime\\(\\[\\.\\]\\.\\+\\)\\?\\\\\\.js\\$/,
       ],
+      "styleTests": [],
     },
     MiniCssExtractPlugin {
       "_sortedModulesCache": WeakMap {},
diff --git a/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/inlineChunk.test.ts.snap b/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/inlineChunk.test.ts.snap
index bf3fd9361984..75c20512906f 100644
--- a/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/inlineChunk.test.ts.snap
+++ b/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/inlineChunk.test.ts.snap
@@ -49,9 +49,10 @@ exports[`plugins/inlineChunk > should add InlineChunkHtmlPlugin properly by defa
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [
+      "scriptTests": [
         /builder-runtime\\(\\[\\.\\]\\.\\+\\)\\?\\\\\\.js\\$/,
       ],
+      "styleTests": [],
     },
   ],
 }
@@ -106,7 +107,8 @@ exports[`plugins/inlineChunk > should use proper plugin options when disableInli
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [],
+      "scriptTests": [],
+      "styleTests": [],
     },
   ],
 }
@@ -161,10 +163,11 @@ exports[`plugins/inlineChunk > should use proper plugin options when enableInlin
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [
-        /\\\\\\.js\\$/,
+      "scriptTests": [
+        /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$/,
         /builder-runtime\\(\\[\\.\\]\\.\\+\\)\\?\\\\\\.js\\$/,
       ],
+      "styleTests": [],
     },
   ],
 }
@@ -219,10 +222,12 @@ exports[`plugins/inlineChunk > should use proper plugin options when enableInlin
       "htmlPlugin": [Function],
       "inlinedAssets": Set {},
       "name": "InlineChunkHtmlPlugin",
-      "tests": [
-        /\\\\\\.css\\$/,
+      "scriptTests": [
         /builder-runtime\\(\\[\\.\\]\\.\\+\\)\\?\\\\\\.js\\$/,
       ],
+      "styleTests": [
+        /\\\\\\.css\\$/,
+      ],
     },
   ],
 }
diff --git a/packages/builder/builder/src/plugins/inlineChunk.ts b/packages/builder/builder/src/plugins/inlineChunk.ts
index 0199ac43532a..8c3288e35beb 100644
--- a/packages/builder/builder/src/plugins/inlineChunk.ts
+++ b/packages/builder/builder/src/plugins/inlineChunk.ts
@@ -1,8 +1,11 @@
 import {
   pick,
+  JS_REGEX,
+  CSS_REGEX,
   RUNTIME_CHUNK_NAME,
   isHtmlDisabled,
   DefaultBuilderPlugin,
+  type InlineChunkTest,
 } from '@modern-js/builder-shared';
 
 export const builderPluginInlineChunk = (): DefaultBuilderPlugin => ({
@@ -28,22 +31,23 @@ export const builderPluginInlineChunk = (): DefaultBuilderPlugin => ({
           enableInlineScripts,
         } = config.output;
 
-        const tests: RegExp[] = [];
+        const scriptTests: InlineChunkTest[] = [];
+        const styleTests: InlineChunkTest[] = [];
 
         if (enableInlineScripts) {
-          tests.push(
-            enableInlineScripts === true ? /\.js$/ : enableInlineScripts,
+          scriptTests.push(
+            enableInlineScripts === true ? JS_REGEX : enableInlineScripts,
           );
         }
 
         if (enableInlineStyles) {
-          tests.push(
-            enableInlineStyles === true ? /\.css$/ : enableInlineStyles,
+          styleTests.push(
+            enableInlineStyles === true ? CSS_REGEX : enableInlineStyles,
           );
         }
 
         if (!disableInlineRuntimeChunk) {
-          tests.push(
+          scriptTests.push(
             // RegExp like /builder-runtime([.].+)?\.js$/
             // matches builder-runtime.js and builder-runtime.123456.js
             new RegExp(`${RUNTIME_CHUNK_NAME}([.].+)?\\.js$`),
@@ -53,7 +57,8 @@ export const builderPluginInlineChunk = (): DefaultBuilderPlugin => ({
         chain.plugin(CHAIN_ID.PLUGIN.INLINE_HTML).use(InlineChunkHtmlPlugin, [
           HtmlPlugin,
           {
-            tests,
+            styleTests,
+            scriptTests,
             distPath: pick(config.output.distPath, ['js', 'css']),
           },
         ]);
diff --git a/packages/cli/core/src/utils/mergeConfig.ts b/packages/cli/core/src/utils/mergeConfig.ts
index 92ec39721145..dda95525e356 100644
--- a/packages/cli/core/src/utils/mergeConfig.ts
+++ b/packages/cli/core/src/utils/mergeConfig.ts
@@ -1,4 +1,4 @@
-import { ensureArray } from '@modern-js/utils';
+import { ensureArray, isOverriddenConfigKey } from '@modern-js/utils';
 import { mergeWith, isFunction } from '@modern-js/utils/lodash';
 import { UserConfig, NormalizedConfig } from '../types';
 
@@ -6,7 +6,7 @@ export const mergeConfig = <ExtendConfig extends Record<string, any>>(
   configs: Array<UserConfig<ExtendConfig> | NormalizedConfig<ExtendConfig>>,
 ): NormalizedConfig<ExtendConfig> =>
   mergeWith({}, ...configs, (target: any, source: any, key: string) => {
-    // Do not use the following merge logic for source.designSystem and tools.tailwind(css)
+    // Do not use the following merge logic for some keys
     if (
       key === 'designSystem' ||
       (key === 'tailwindcss' && typeof source === 'object')
@@ -14,6 +14,11 @@ export const mergeConfig = <ExtendConfig extends Record<string, any>>(
       return mergeWith({}, target ?? {}, source ?? {});
     }
 
+    // Some keys should use source to override target
+    if (isOverriddenConfigKey(key)) {
+      return source ?? target;
+    }
+
     if (Array.isArray(target) || Array.isArray(source)) {
       if (target === undefined) {
         return source;
diff --git a/packages/document/builder-doc/docs/en/config/output/enableInlineScripts.md b/packages/document/builder-doc/docs/en/config/output/enableInlineScripts.md
index 0d843f574e18..52326124e4b6 100644
--- a/packages/document/builder-doc/docs/en/config/output/enableInlineScripts.md
+++ b/packages/document/builder-doc/docs/en/config/output/enableInlineScripts.md
@@ -1,4 +1,12 @@
-- **Type:** `boolean`
+- **Type:**
+
+```ts
+type EnableInlineScripts =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
 - **Default:** `false`
 - **Bundler:** `only support webpack`
 
@@ -64,5 +72,24 @@ export default {
 ```
 
 :::tip
-The production filename will contains a hash by default, such as `/main.18a568e5.js`.
+The production filename includes a hash value by default, such as `static/js/main.18a568e5.js`. Therefore, in regular expressions, `\w+` is used to match the hash.
 :::
+
+### Using Function
+
+You can also set `output.enableInlineScripts` to a function that accepts the following parameters:
+
+- `name`: The filename, such as `static/js/main.18a568e5.js`.
+- `size`: The file size in bytes.
+
+For example, if we want to inline assets that are smaller than 10KB, we can add the following configuration:
+
+```js
+export default {
+  output: {
+    enableInlineScripts({ size }) {
+      return size < 10 * 1000;
+    },
+  },
+};
+```
diff --git a/packages/document/builder-doc/docs/en/config/output/enableInlineStyles.md b/packages/document/builder-doc/docs/en/config/output/enableInlineStyles.md
index f579095ac826..7c91168aa98d 100644
--- a/packages/document/builder-doc/docs/en/config/output/enableInlineStyles.md
+++ b/packages/document/builder-doc/docs/en/config/output/enableInlineStyles.md
@@ -1,4 +1,12 @@
-- **Type:** `boolean`
+- **Type:**
+
+```ts
+type EnableInlineStyles =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
 - **Default:** `false`
 
 Whether to inline output style files (.css files) into HTML with `<style>` tags in production mode.
@@ -64,5 +72,24 @@ export default {
 ```
 
 :::tip
-The production filename will contains a hash by default, such as `/main.18a568e5.css`.
+The production filename includes a hash value by default, such as `static/css/main.18a568e5.css`. Therefore, in regular expressions, `\w+` is used to match the hash.
 :::
+
+### Using Function
+
+You can also set `output.enableInlineStyles` to a function that accepts the following parameters:
+
+- `name`: The filename, such as `static/css/main.18a568e5.css`.
+- `size`: The file size in bytes.
+
+For example, if we want to inline assets that are smaller than 10KB, we can add the following configuration:
+
+```js
+export default {
+  output: {
+    enableInlineStyles({ size }) {
+      return size < 10 * 1000;
+    },
+  },
+};
+```
diff --git a/packages/document/builder-doc/docs/zh/config/output/enableInlineScripts.md b/packages/document/builder-doc/docs/zh/config/output/enableInlineScripts.md
index 8a419dd6c807..f4028d7b1e73 100644
--- a/packages/document/builder-doc/docs/zh/config/output/enableInlineScripts.md
+++ b/packages/document/builder-doc/docs/zh/config/output/enableInlineScripts.md
@@ -1,4 +1,12 @@
-- **类型：** `boolean | RegExp`
+- **类型：**
+
+```ts
+type EnableInlineScripts =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
 - **默认值：** `false`
 - **打包工具：** `仅支持 webpack`
 
@@ -64,5 +72,24 @@ export default {
 ```
 
 :::tip
-生产环境的文件名中默认包含了一个 hash 值，比如 `/main.18a568e5.js`。
+生产环境的文件名中默认包含了一个 hash 值，比如 `static/js/main.18a568e5.js`。因此，在正则表达式中需要通过 `\w+` 来匹配 hash。
 :::
+
+### 通过函数匹配
+
+你也可以将 `output.enableInlineScripts` 设置为一个函数，函数接收以下参数：
+
+- `name`：文件名，比如 `static/js/main.18a568e5.js`。
+- `size`：文件大小，单位为 byte。
+
+比如，我们希望内联小于 10KB 的资源，可以添加如下配置：
+
+```js
+export default {
+  output: {
+    enableInlineScripts({ size }) {
+      return size < 10 * 1000;
+    },
+  },
+};
+```
diff --git a/packages/document/builder-doc/docs/zh/config/output/enableInlineStyles.md b/packages/document/builder-doc/docs/zh/config/output/enableInlineStyles.md
index 7e824863897f..d7842ade7b7d 100644
--- a/packages/document/builder-doc/docs/zh/config/output/enableInlineStyles.md
+++ b/packages/document/builder-doc/docs/zh/config/output/enableInlineStyles.md
@@ -1,4 +1,12 @@
-- **类型：** `boolean | RegExp`
+- **类型：**
+
+```ts
+type EnableInlineStyles =
+  | boolean
+  | RegExp
+  | ((params: { size: number; name: string }) => boolean);
+```
+
 - **默认值：** `false`
 
 用来控制生产环境中是否用 `<style>` 标签将产物中的 style 文件（.css 文件）inline 到 HTML 中。
@@ -64,5 +72,24 @@ export default {
 ```
 
 :::tip
-生产环境的文件名中默认包含了一个 hash 值，比如 `/main.18a568e5.css`。
+生产环境的文件名中默认包含了一个 hash 值，比如 `static/css/main.18a568e5.css`。因此，在正则表达式中需要通过 `\w+` 来匹配 hash。
 :::
+
+### 通过函数匹配
+
+你也可以将 `output.enableInlineStyles` 设置为一个函数，函数接收以下参数：
+
+- `name`：文件名，比如 `static/css/main.18a568e5.css`。
+- `size`：文件大小，单位为 byte。
+
+比如，我们希望内联小于 10KB 的资源，可以添加如下配置：
+
+```js
+export default {
+  output: {
+    enableInlineStyles({ size }) {
+      return size < 10 * 1000;
+    },
+  },
+};
+```
diff --git a/packages/toolkit/utils/src/cli/config.ts b/packages/toolkit/utils/src/cli/config.ts
new file mode 100644
index 000000000000..57c740096cf8
--- /dev/null
+++ b/packages/toolkit/utils/src/cli/config.ts
@@ -0,0 +1,5 @@
+/**
+ * When merging config, some properties prefer `override` rather than `merge to array`
+ */
+export const isOverriddenConfigKey = (key: string) =>
+  ['removeConsole', 'enableInlineScripts', 'enableInlineStyles'].includes(key);
diff --git a/packages/toolkit/utils/src/cli/index.ts b/packages/toolkit/utils/src/cli/index.ts
index 14d70f798d99..44140a4731ac 100644
--- a/packages/toolkit/utils/src/cli/index.ts
+++ b/packages/toolkit/utils/src/cli/index.ts
@@ -17,3 +17,4 @@ export * from './prettyInstructions';
 export * from './require';
 export * from './runtimeExports';
 export * from './watch';
+export * from './config';
diff --git a/tests/e2e/builder/cases/inline-chunk/index.test.ts b/tests/e2e/builder/cases/inline-chunk/index.test.ts
index 4a827fded814..61442285d0df 100644
--- a/tests/e2e/builder/cases/inline-chunk/index.test.ts
+++ b/tests/e2e/builder/cases/inline-chunk/index.test.ts
@@ -226,17 +226,47 @@ webpackOnlyTest('using RegExp to inline scripts', async () => {
     },
     builderConfig: {
       output: {
-        enableInlineScripts: /\/main\.\w+\.js$/,
+        enableInlineScripts: /\/index\.\w+\.js$/,
       },
       tools: toolsConfig,
     },
   });
   const files = await builder.unwrapOutputJSON(false);
 
-  // no main.js in output
+  // no index.js in output
   expect(
     Object.keys(files).filter(
-      fileName => fileName.endsWith('.js') && fileName.includes('/main.'),
+      fileName => fileName.endsWith('.js') && fileName.includes('/index.'),
+    ).length,
+  ).toEqual(0);
+
+  // all source maps in output
+  expect(
+    Object.keys(files).filter(fileName => fileName.endsWith('.js.map')).length,
+  ).toEqual(3);
+});
+
+webpackOnlyTest('inline scripts by filename and file size', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: {
+      index: path.resolve(__dirname, './src/index.js'),
+    },
+    builderConfig: {
+      output: {
+        enableInlineScripts({ size, name }) {
+          return name.includes('index') && size < 1000;
+        },
+      },
+      tools: toolsConfig,
+    },
+  });
+  const files = await builder.unwrapOutputJSON(false);
+
+  // no index.js in output
+  expect(
+    Object.keys(files).filter(
+      fileName => fileName.endsWith('.js') && fileName.includes('/index.'),
     ).length,
   ).toEqual(0);
 
@@ -254,17 +284,42 @@ test('using RegExp to inline styles', async () => {
     },
     builderConfig: {
       output: {
-        enableInlineStyles: /\/main\.\w+\.css$/,
+        enableInlineStyles: /\/index\.\w+\.css$/,
+      },
+      tools: toolsConfig,
+    },
+  });
+  const files = await builder.unwrapOutputJSON(false);
+
+  // no index.css in output
+  expect(
+    Object.keys(files).filter(
+      fileName => fileName.endsWith('.css') && fileName.includes('/index.'),
+    ).length,
+  ).toEqual(0);
+});
+
+test('inline styles by filename and file size', async () => {
+  const builder = await build({
+    cwd: __dirname,
+    entry: {
+      index: path.resolve(__dirname, './src/index.js'),
+    },
+    builderConfig: {
+      output: {
+        enableInlineStyles({ size, name }) {
+          return name.includes('index') && size < 1000;
+        },
       },
       tools: toolsConfig,
     },
   });
   const files = await builder.unwrapOutputJSON(false);
 
-  // no main.css in output
+  // no index.css in output
   expect(
     Object.keys(files).filter(
-      fileName => fileName.endsWith('.css') && fileName.includes('/main.'),
+      fileName => fileName.endsWith('.css') && fileName.includes('/index.'),
     ).length,
   ).toEqual(0);
 });