feat(builder): support inline assets by file size

[chenjiahan]

Summary

Users can inline scripts by the file size, such as inline small scripts to HTML:

export default {
  output: {
    enableInlineScripts({ size }) {
      return size < 10 * 1000;
    },
  },
};

🤖 Generated by Copilot at 9e9f48c

This pull request adds more flexibility and customization to the inline scripts and styles feature of the @modern-js/builder package. It refactors and improves the code quality of the InlineChunkHtmlPlugin and the config merging modules. It also updates the documentation and the test cases for the feature. It exports some new types and a utility function from the @modern-js/toolkit/utils and the @modern-js/builder packages.

Details

🤖 Generated by Copilot at 9e9f48c

• Add a changeset file to describe the changes and version bumps (link)
• Add a new function isOverriddenConfigKey to determine which config keys should use source to override target instead of merging (link)
• Export the isOverriddenConfigKey function from the @modern-js/toolkit/utils package (link)
• Use the isOverriddenConfigKey function in the mergeBuilderConfig and mergeConfig modules to replace the hard-coded arrays of config keys (link, link, link, link, link)
• Add new types InlineChunkTest and InlineChunkHtmlPluginOptions to define the options for the InlineChunkHtmlPlugin (link, link)
• Export the InlineChunkTest type from the @modern-js/builder-shared package (link)
• Add new properties styleTests and scriptTests to the InlineChunkHtmlPlugin class to store the options (link)
• Update the constructor of the InlineChunkHtmlPlugin class to accept the new options and assign them to the properties (link)
• Add a new method matchTests to the InlineChunkHtmlPlugin class to check if a file matches any of the tests (link)
• Update the processScriptTag and processStyleTag methods of the InlineChunkHtmlPlugin class to use the matchTests method and add some checks and comments (link, link, link, link)
• Add a new schema inlineSchema to validate the enableInlineScripts and enableInlineStyles config options (link)
• Update the sharedOutputConfigSchema variable to use the inlineSchema for the enableInlineScripts and enableInlineStyles config options (link)
• Update the SharedOutputConfig and NormalizedSharedOutputConfig interfaces to use the InlineChunkTest type for the enableInlineScripts and enableInlineStyles config options (link, link, link)
• Update the builderPluginInlineChunk function to use the new styleTests and scriptTests options for the InlineChunkHtmlPlugin and replace the hard-coded regular expressions with the JS_REGEX and CSS_REGEX constants (link, link, link)
• Update the documentation for the output.enableInlineScripts and output.enableInlineStyles config options in English and Chinese to reflect the new type and usage (link, link, link, link, link, link, link, link)
• Update the test case for the inline scripts by filename feature to match the index file instead of the main file (link, link)
• Add a new test case for the inline scripts by filename and file size feature to use a function to match the file size and name (link)
• Update the test case for the inline styles by filename feature to match the index file instead of the main file (link, link)
• Add a new test case for the inline styles by filename and file size feature to use a function to match the file size and name (link)

Related Issue

Checklist

• I have added changeset via pnpm run change.
• I have updated the documentation.
• I have added tests to cover my changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: de98911

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 253 packages

Name	Type
@modern-js/builder-shared	Patch
@modern-js/builder	Patch
@modern-js/utils	Patch
@modern-js/core	Patch
@modern-js/plugin-storybook	Patch
@modern-js/plugin-swc	Patch
@modern-js/builder-cli	Patch
@modern-js/builder-rspack-provider	Patch
@modern-js/builder-webpack-provider	Patch
@modern-js/friendly-errors-webpack-plugin	Patch
@modern-js/builder-plugin-esbuild	Patch
@modern-js/builder-plugin-node-polyfill	Patch
@modern-js/builder-plugin-stylus	Patch
@modern-js/builder-plugin-swc	Patch
@modern-js/builder-plugin-vue	Patch
@modern-js/builder-plugin-vue2	Patch
@modern-js/app-tools	Patch
@e2e/builder	Patch
@modern-js/babel-preset-app	Patch
@modern-js/babel-preset-base	Patch
@modern-js/doc-plugin-auto-sidebar	Patch
@modern-js/plugin-bff	Patch
@modern-js/plugin-changeset	Patch
@modern-js/plugin-data-loader	Patch
@modern-js/plugin-i18n	Patch
@modern-js/plugin-lint	Patch
@modern-js/plugin-proxy	Patch
@modern-js/plugin-ssg	Patch
@modern-js/plugin-tailwindcss	Patch
@modern-js/plugin-devtools	Patch
@modern-js/plugin-garfish	Patch
@modern-js/plugin-router-v5	Patch
@modern-js/runtime	Patch
@modern-js/plugin-testing	Patch
@modern-js/generator-common	Patch
@modern-js/generator-plugin	Patch
@modern-js/generator-utils	Patch
@modern-js/new-action	Patch
@modern-js/entry-generator	Patch
@modern-js/repo-generator	Patch
@modern-js/bff-core	Patch
@modern-js/server-core	Patch
@modern-js/create-request	Patch
@modern-js/plugin-express	Patch
@modern-js/plugin-koa	Patch
@modern-js/plugin-polyfill	Patch
@modern-js/plugin-server	Patch
@modern-js/plugin-worker	Patch
@modern-js/prod-server	Patch
@modern-js/server	Patch
@modern-js/server-utils	Patch
@modern-js/builder-plugin-image-compress	Patch
@modern-js/plugin-module-doc	Patch
@modern-js/module-tools	Patch
@modern-js/monorepo-tools	Patch
@modern-js/create	Patch
@modern-js/e2e	Patch
@modern-js/monorepo-utils	Patch
@modern-js/node-bundle-require	Patch
@modern-js/plugin	Patch
@modern-js/upgrade	Patch
@modern-js/babel-compiler	Patch
tests	Patch
server-config	Patch
@e2e/garfish	Patch
@e2e/builder-cli-rspack	Patch
@e2e/builder-cli-vue	Patch
@e2e/builder-cli-webpack	Patch
@modern-js/devtools-client	Patch
@modern-js/devtools-mount	Patch
@integration-test/alias-set	Patch
api-service-koa	Patch
app-docmuent	Patch
integration-asset-prefix	Patch
async-entry-test	Patch
bff-express	Patch
bff-koa	Patch
integration-builder-plugins	Patch
builder-rspack	Patch
integration-clean-dist-path	Patch
integration-compatibility	Patch
integration-copy-assets	Patch
integration-custom-render	Patch
integration-custom-template	Patch
dev-server	Patch
@integration-test/devtools	Patch
integration-disable-html	Patch
legacy-esbuild-minify-js	Patch
esbuild-transform-and-minify	Patch
integration-config-async-config-test	Patch
integration-basic-local-config	Patch
integration-config-function-params	Patch
integration-local-config-function	Patch
main-entry-name	Patch
tmp	Patch
nonce	Patch
routes	Patch
file-based-router	Patch
use-loader	Patch
select-mul-entry-test	Patch
select-one-entry-test	Patch
server-middleware	Patch
server-hook-reqeust	Patch
server-hook-response	Patch
server-hook-router	Patch
@integration-test/server-hook-reqeust	Patch
server-prod	Patch
@source-code-build/app-ts-loader	Patch
@source-code-build/app	Patch
ssg-fixtures-nested-routes	Patch
ssg-fixtures-simple	Patch
ssg-fixtures-web-server	Patch
ssr-base-json-test	Patch
ssr-base-test	Patch
ssr-base-fallback-test	Patch
init	Patch
ssr-preload	Patch
ssr-streaming-test	Patch
swc-minify-css	Patch
swc-minify-js	Patch
transform-fail	Patch
integration-tailwindcss-v2	Patch
integration-tailwindcss-v3-js-config	Patch
integration-tailwindcss-v3-merge-config	Patch
integration-tailwindcss-v3-ts-config	Patch
integration-tailwindcss-v3	Patch
twin-macro-v2	Patch
twin-macro-v3	Patch
tmp-dir	Patch
write-to-dist	Patch
@e2e/garfish-dashboard-router-v6	Patch
@e2e/garfish-dashboard	Patch
@e2e/garfish-main-router-v6	Patch
@e2e/garfish-main	Patch
@e2e/garfish-table	Patch
@modern-js-app/eslint-config	Patch
@modern-js/main-doc	Patch
@modern-js/module-tools-docs	Patch
@modern-js/bff-generator	Patch
@modern-js/dependence-generator	Patch
@modern-js/generator-generator	Patch
@modern-js/module-generator	Patch
@modern-js/module-test-generator	Patch
@modern-js/monorepo-generator	Patch
@modern-js/mwa-generator	Patch
@modern-js/router-v5-generator	Patch
@modern-js/rspack-generator	Patch
@modern-js/ssg-generator	Patch
@modern-js/storybook-generator	Patch
@modern-js/test-generator	Patch
@modern-js/upgrade-generator	Patch
@modern-js/generator-plugin-plugin	Patch
@modern-js/base-generator	Patch
@modern-js/packages-generator	Patch
@modern-js/server-generator	Patch
@modern-js/tailwindcss-generator	Patch
@scripts/update-codesmith	Patch
@modern-js/plugin-module-babel	Patch
@modern-js/plugin-module-banner	Patch
@modern-js/plugin-module-import	Patch
@modern-js/plugin-module-main-fields	Patch
@modern-js/plugin-module-node-polyfill	Patch
@modern-js/plugin-module-polyfill	Patch
@modern-js/plugin-module-target	Patch
integration-module-doc	Patch
integration-module-tools	Patch
@modern-js/eslint-config	Patch
@modern-js/generator-cases	Patch
@modern-js/changeset-generator	Patch
@modern-js/libuild-plugin-babel	Patch
@modern-js/libuild-plugin-node-polyfill	Patch
@modern-js/libuild-plugin-svgr	Patch
libuild-test	Patch
@modern-js/builder-doc	Patch
@modern-js/tsconfig	Patch
@modern-js/babel-plugin-module-resolver	Patch
@modern-js/bff-runtime	Patch
@modern-js/libuild	Patch
@modern-js/libuild-plugin-swc	Patch
@modern-js/libuild-utils	Patch
@modern-js/types	Patch
@scripts/build	Patch
@scripts/check-changeset	Patch
@scripts/jest-config	Patch
@scripts/lint-package-json	Patch
@scripts/prebundle	Patch
@scripts/vitest-config	Patch
esbuild-integration	Patch
browser-test	Patch
lib1	Patch
lib2	Patch
lib3	Patch
antd-mobile	Patch
mylib	Patch
integration-load-config	Patch
alias-js-test	Patch
alias-ts-test	Patch
asset-path-test	Patch
auto-external-test	Patch
build-platform-test	Patch
build-preset-error-test	Patch
build-preset-function-test	Patch
build-preset-test	Patch
build-preset-string-test	Patch
build-type-test	Patch
copy-test	Patch
decorator-test	Patch
design-system-test	Patch
dev-test	Patch
dts-test	Patch
entry-test	Patch
esbuild-options-test	Patch
external-test	Patch
format-cjs-test	Patch
format-esm-test	Patch
format-iife-test	Patch
format-umd-test	Patch
global-vars-js-test	Patch
global-vars-ts-test	Patch
input-filter-test	Patch
jsx-test	Patch
metafile-test	Patch
minify-test	Patch
platform-test	Patch
redirect-test	Patch
module-tools-side-effects-test	Patch
source-dir-test	Patch
sourcemap-test	Patch
splitting-test	Patch
svgr-test	Patch
target-test	Patch
tools-test	Patch
transform-lodash	Patch
umdGlobals-test	Patch
get-module-id-test	Patch
builder-test	Patch
build-watch-test	Patch
runtime	Patch
entry	Patch
@source-code-build/common	Patch
@source-code-build/components	Patch
@source-code-build/utils	Patch
ssg	Patch
ssr	Patch
swc-integration	Patch
tailwindcss-integration-test	Patch
@e2e/webpack-builder-import-antd-v4	Patch
@e2e/webpack-builder-import-antd-v5	Patch
@e2e/webpack-builder-import-arco	Patch
@e2e/webpack-builder-test-moment	Patch
@e2e/builder-remove-prop-types	Patch
@e2e/builder-vue3	Patch
@e2e/builder-vue2	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Patch coverage has no change and project coverage change: -3.86% ⚠️

Comparison is base (99693f0) 57.59% compared to head (de98911) 53.74%.
Report is 1084 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4563      +/-   ##
==========================================
- Coverage   57.59%   53.74%   -3.86%     
==========================================
  Files         672      655      -17     
  Lines       17794    17966     +172     
  Branches     3876     4142     +266     
==========================================
- Hits        10249     9656     -593     
- Misses       6934     7652     +718     
- Partials      611      658      +47     

see 452 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.