@modern-js/builder 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @modern-js/builder
 
+## 2.4.0
+
+### Patch Changes
+
+- 014d06b: feat: reuse bundleAnalyzer plugin, support performance.bundleAnalyze config in rspack-provider
+
+  feat: 复用 bundleAnalyzer 插件，在 rspack-provider 中支持 performance.bundleAnalyze 配置项
+
+- 91db54e: feat: use 'devtool: source-map' for ssr webpack bundle
+  feat: 使用 'devtool: source-map' 作为 ssr 构建时的默认配置
+- Updated dependencies [6f83037]
+- Updated dependencies [014d06b]
+- Updated dependencies [98a2733]
+- Updated dependencies [a5572b8]
+- Updated dependencies [a914be8]
+- Updated dependencies [8c2db5f]
+  - @modern-js/builder-shared@2.4.0
+  - @modern-js/utils@2.4.0
+
+## 2.3.0
+
+### Minor Changes
+
+- f9a26fe: fix(@modern-js/builder-shared): openBrowser add openChrome.applescript script
+
+  fix(@modern-js/builder-shared): openBrowser 添加 openChrome.applescript 脚本
+
+### Patch Changes
+
+- 7cd8185: chore: reuse splitChunks plugin between rspack-provider and webpack-provider
+
+  chore: 在 rspack-provider 和 webpack-provider 间复用 splitChunks plugin
+
+- Updated dependencies [fd5a3ed]
+- Updated dependencies [67ba34a]
+- Updated dependencies [2ad9fdf]
+- Updated dependencies [f9a26fe]
+- Updated dependencies [6ca1c0b]
+- Updated dependencies [89b6739]
+  - @modern-js/utils@2.3.0
+  - @modern-js/builder-shared@2.3.0
+
 ## 2.2.0
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,7 @@
   </a>
 </p>
 <p align="center">
-  A Universal Build Engine for Modern Web Development
+  A Build Engine for web development.
 </p>
 
 # @modern-js/builder

package/dist/plugins/bundleAnalyzer.d.ts

@@ -0,0 +1,2 @@
+import { DefaultBuilderPlugin } from '@modern-js/builder-shared';
+export declare function builderPluginBundleAnalyzer(): DefaultBuilderPlugin;

package/dist/plugins/bundleAnalyzer.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builderPluginBundleAnalyzer = void 0;
+function builderPluginBundleAnalyzer() {
+    return {
+        name: 'builder-plugin-bundle-analyzer',
+        setup(api) {
+            api.modifyBundlerChain(async (chain, { CHAIN_ID, target }) => {
+                const config = api.getNormalizedConfig();
+                // There are two ways to open the bundle analyzer:
+                // 1. Set environment variable `BUNDLE_ANALYZE`
+                // 2. Set performance.bundleAnalyze config
+                if (!process.env.BUNDLE_ANALYZE && !config.performance.bundleAnalyze) {
+                    return;
+                }
+                const { default: BundleAnalyzer } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared/webpack-bundle-analyzer')));
+                chain
+                    .plugin(CHAIN_ID.PLUGIN.BUNDLE_ANALYZER)
+                    .use(BundleAnalyzer.BundleAnalyzerPlugin, [
+                    {
+                        analyzerMode: 'static',
+                        openAnalyzer: false,
+                        reportFilename: `report-${target}.html`,
+                        ...(config.performance.bundleAnalyze || {}),
+                    },
+                ]);
+            });
+        },
+    };
+}
+exports.builderPluginBundleAnalyzer = builderPluginBundleAnalyzer;

package/dist/plugins/devtool.js

@@ -5,15 +5,16 @@ const builder_shared_1 = require("@modern-js/builder-shared");
 const builderPluginDevtool = () => ({
     name: 'builder-plugin-devtool',
     setup(api) {
-        api.modifyBundlerChain((chain, { isProd }) => {
+        api.modifyBundlerChain((chain, { isProd, isServer }) => {
             const config = api.getNormalizedConfig();
             if (!(0, builder_shared_1.isUseJsSourceMap)(config)) {
                 chain.devtool(false);
             }
             else {
+                const prodDevTool = isServer ? 'source-map' : 'hidden-source-map';
                 const devtool = isProd
                     ? // hide the source map URL in production to avoid Chrome warning
-                        'hidden-source-map'
+                        prodDevTool
                     : 'cheap-module-source-map';
                 chain.devtool(devtool);
             }

package/dist/plugins/index.d.ts

@@ -8,4 +8,6 @@ export declare const plugins: {
     cache: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     yaml: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     toml: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    splitChunks: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    bundleAnalyzer: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
 };

package/dist/plugins/index.js

@@ -34,4 +34,6 @@ exports.plugins = {
     cache: () => Promise.resolve().then(() => __importStar(require('./cache'))).then(m => m.builderPluginCache()),
     yaml: () => Promise.resolve().then(() => __importStar(require('./yaml'))).then(m => m.builderPluginYaml()),
     toml: () => Promise.resolve().then(() => __importStar(require('./toml'))).then(m => m.builderPluginToml()),
+    splitChunks: () => Promise.resolve().then(() => __importStar(require('./splitChunks'))).then(m => m.builderPluginSplitChunks()),
+    bundleAnalyzer: () => Promise.resolve().then(() => __importStar(require('./bundleAnalyzer'))).then(m => m.builderPluginBundleAnalyzer()),
 };

package/dist/plugins/splitChunks.d.ts

@@ -0,0 +1,2 @@
+import { DefaultBuilderPlugin } from '@modern-js/builder-shared';
+export declare function builderPluginSplitChunks(): DefaultBuilderPlugin;

package/dist/plugins/splitChunks.js

@@ -0,0 +1,232 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builderPluginSplitChunks = void 0;
+const assert_1 = __importDefault(require("assert"));
+const builder_shared_1 = require("@modern-js/builder-shared");
+function getUserDefinedCacheGroups(forceSplitting) {
+    const cacheGroups = {};
+    forceSplitting.forEach((reg, index) => {
+        const key = `force-split-${index}`;
+        cacheGroups[key] = {
+            test: reg,
+            name: key,
+            chunks: 'all',
+            // Ignore minimum size, minimum chunks and maximum requests and always create chunks for user defined cache group.
+            enforce: true,
+        };
+    });
+    return cacheGroups;
+}
+async function splitByExperience(ctx) {
+    const { isPackageInstalled } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
+    const { override, polyfill, rootPath, defaultConfig, userDefinedCacheGroups, } = ctx;
+    const experienceCacheGroup = {};
+    const packageRegExps = {
+        react: /[\\/]react|react-dom[\\/]/,
+        router: /[\\/]react-router|react-router-dom|history[\\/]/,
+        lodash: /[\\/]lodash|lodash-es[\\/]/,
+    };
+    // Detect if the package is installed in current project
+    // If installed, add the package to cache group
+    if (isPackageInstalled('antd', rootPath)) {
+        packageRegExps.antd = /[\\/]antd[\\/]/;
+    }
+    if (isPackageInstalled('@arco-design/web-react', rootPath)) {
+        packageRegExps.arco = /[\\/]arco-design[\\/]/;
+    }
+    if (isPackageInstalled('@douyinfe/semi-ui', rootPath)) {
+        packageRegExps.semi = /[\\/]semi-ui[\\/]/;
+    }
+    if (polyfill === 'entry' || polyfill === 'usage') {
+        packageRegExps.polyfill = /[\\/]core-js|@babel\/runtime[\\/]/;
+    }
+    Object.entries(packageRegExps).forEach(([name, test]) => {
+        const key = `lib-${name}`;
+        experienceCacheGroup[key] = {
+            test,
+            priority: 0,
+            name: key,
+            reuseExistingChunk: true,
+        };
+    });
+    (0, assert_1.default)(defaultConfig !== false);
+    (0, assert_1.default)(override !== false);
+    return {
+        ...defaultConfig,
+        ...override,
+        cacheGroups: {
+            ...defaultConfig.cacheGroups,
+            ...experienceCacheGroup,
+            ...userDefinedCacheGroups,
+            ...override.cacheGroups,
+        },
+    };
+}
+function splitByModule(ctx) {
+    const { override, userDefinedCacheGroups, defaultConfig } = ctx;
+    (0, assert_1.default)(defaultConfig !== false);
+    (0, assert_1.default)(override !== false);
+    return {
+        ...defaultConfig,
+        minSize: 0,
+        maxInitialRequests: Infinity,
+        ...override,
+        cacheGroups: {
+            ...defaultConfig.cacheGroups,
+            ...userDefinedCacheGroups,
+            // Core group
+            vendors: {
+                priority: -10,
+                test: /[\\/]node_modules[\\/]/,
+                // todo: not support in rspack
+                name(module) {
+                    return (0, builder_shared_1.getPackageNameFromModulePath)(module.context);
+                },
+            },
+            ...override.cacheGroups,
+        },
+    };
+}
+function splitBySize(ctx) {
+    var _a, _b;
+    const { override, userDefinedCacheGroups, defaultConfig, builderConfig } = ctx;
+    (0, assert_1.default)(defaultConfig !== false);
+    (0, assert_1.default)(override !== false);
+    (0, assert_1.default)(builderConfig.strategy === 'split-by-size');
+    return {
+        ...defaultConfig,
+        minSize: (_a = builderConfig.minSize) !== null && _a !== void 0 ? _a : 0,
+        maxSize: (_b = builderConfig.maxSize) !== null && _b !== void 0 ? _b : Infinity,
+        ...override,
+        cacheGroups: {
+            ...defaultConfig.cacheGroups,
+            ...userDefinedCacheGroups,
+            ...override.cacheGroups,
+        },
+    };
+}
+function splitCustom(ctx) {
+    const { override, userDefinedCacheGroups, defaultConfig } = ctx;
+    (0, assert_1.default)(defaultConfig !== false);
+    (0, assert_1.default)(override !== false);
+    return {
+        ...defaultConfig,
+        ...override,
+        cacheGroups: {
+            ...defaultConfig.cacheGroups,
+            ...userDefinedCacheGroups,
+            ...override.cacheGroups,
+        },
+    };
+}
+function allInOne(_ctx) {
+    // Set false to avoid chunk split.
+    return false;
+}
+// Ignore user defined cache group to get single vendor chunk.
+function singleVendor(ctx) {
+    const { override, defaultConfig } = ctx;
+    (0, assert_1.default)(defaultConfig !== false);
+    (0, assert_1.default)(override !== false);
+    return {
+        ...defaultConfig,
+        ...override,
+        cacheGroups: {
+            ...defaultConfig.cacheGroups,
+            ...override.cacheGroups,
+        },
+    };
+}
+const SPLIT_STRATEGY_DISPATCHER = {
+    'split-by-experience': splitByExperience,
+    'split-by-module': splitByModule,
+    'split-by-size': splitBySize,
+    custom: splitCustom,
+    'all-in-one': allInOne,
+    'single-vendor': singleVendor,
+};
+function builderPluginSplitChunks() {
+    return {
+        name: 'builder-plugin-split-chunks',
+        setup(api) {
+            api.modifyBundlerChain(async (chain, { isServer, isWebWorker }) => {
+                var _a;
+                if (isServer || isWebWorker) {
+                    chain.optimization.splitChunks(false);
+                    // web worker does not support dynamic imports, dynamicImportMode need set to eager
+                    if (isWebWorker) {
+                        // todo: not support in rspack
+                        // @ts-expect-error
+                        chain.module.parser.merge({
+                            javascript: {
+                                dynamicImportMode: 'eager',
+                            },
+                        });
+                    }
+                    return;
+                }
+                const config = api.getNormalizedConfig();
+                const defaultConfig = {
+                    // Optimize both `initial` and `async` chunks
+                    chunks: 'all',
+                    // When chunk size >= 50000 bytes, split it into separate chunk
+                    enforceSizeThreshold: 50000,
+                    cacheGroups: {},
+                };
+                const { chunkSplit } = config.performance;
+                let userDefinedCacheGroups = {};
+                if (chunkSplit.forceSplitting) {
+                    userDefinedCacheGroups = getUserDefinedCacheGroups(chunkSplit.forceSplitting);
+                }
+                // Patch the override config difference between the `custom` strategy and other strategy.
+                const override = chunkSplit.strategy === 'custom'
+                    ? // `chunkSplit.splitChunks` compat for Eden
+                        (_a = chunkSplit.splitChunks) !== null && _a !== void 0 ? _a : chunkSplit.override
+                    : chunkSplit.override;
+                // Apply different strategy
+                const splitChunksOptions = await SPLIT_STRATEGY_DISPATCHER[chunkSplit.strategy]({
+                    defaultConfig,
+                    override: override || {},
+                    userDefinedCacheGroups,
+                    builderConfig: chunkSplit,
+                    rootPath: api.context.rootPath,
+                    polyfill: config.output.polyfill,
+                });
+                chain.optimization.splitChunks(splitChunksOptions);
+                // should not extract runtime chunk when strategy is `all-in-one`
+                if (chunkSplit.strategy !== 'all-in-one') {
+                    chain.optimization.runtimeChunk({
+                        name: builder_shared_1.RUNTIME_CHUNK_NAME,
+                    });
+                }
+            });
+        },
+    };
+}
+exports.builderPluginSplitChunks = builderPluginSplitChunks;

package/package.json

@@ -14,7 +14,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.2.0",
+  "version": "2.4.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "@modern-js/builder-shared": "2.2.0",
-    "@modern-js/utils": "2.2.0"
+    "@modern-js/builder-shared": "2.4.0",
+    "@modern-js/utils": "2.4.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.0",
@@ -36,7 +36,7 @@
     "@types/babel__preset-env": "^7.9.2",
     "@types/node": "^14",
     "typescript": "^4",
-    "@scripts/vitest-config": "2.2.0"
+    "@scripts/vitest-config": "2.4.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",