@modern-js/builder 2.8.0 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @modern-js/builder
 
+## 2.10.0
+
+### Patch Changes
+
+- Updated dependencies [a8db932]
+- Updated dependencies [92d247f]
+- Updated dependencies [0da32d0]
+- Updated dependencies [0d9962b]
+- Updated dependencies [fbefa7e]
+- Updated dependencies [4d54233]
+- Updated dependencies [6db4864]
+  - @modern-js/builder-shared@2.10.0
+  - @modern-js/utils@2.10.0
+
+## 2.9.0
+
+### Patch Changes
+
+- f31a254d78: feat: improve vendor split chunk rule
+  feat: 优化针对第三方库的拆包策略
+- 1f047183c3: feat: enable svgo to avoid ID conflicts
+  feat: 启用 svgo 以避免 ID 冲突
+- da66232feb: fix: asset url using incorrect path seperator in windows
+
+  fix: 修复 windows 中 asset url 使用错误的路径分隔符
+
+  - @modern-js/builder-shared@2.9.0
+  - @modern-js/utils@2.9.0
+
 ## 2.8.0
 
 ### Patch Changes

package/dist/plugins/asset.js

@@ -1,7 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderAssetPlugin = void 0;
-const path_1 = require("path");
+const path_1 = __importDefault(require("path"));
 const builder_shared_1 = require("@modern-js/builder-shared");
 const builderAssetPlugin = (assetType, exts) => ({
     name: `builder-plugin-${assetType}`,
@@ -16,7 +19,7 @@ const builderAssetPlugin = (assetType, exts) => ({
             (0, builder_shared_1.chainStaticAssetRule)({
                 rule,
                 maxSize,
-                filename: (0, path_1.join)(distDir, filename),
+                filename: path_1.default.posix.join(distDir, filename),
                 assetType,
             });
         });

package/dist/plugins/splitChunks.d.ts

@@ -1,4 +1,4 @@
 import { DefaultBuilderPlugin } from '@modern-js/builder-shared';
 /** Expect to match path just like "./node_modules/react-router/" */
-export declare const createDependenciesRegExp: (...dependencies: string[]) => RegExp;
+export declare const createDependenciesRegExp: (...dependencies: (string | RegExp)[]) => RegExp;
 export declare function builderPluginSplitChunks(): DefaultBuilderPlugin;

package/dist/plugins/splitChunks.js

@@ -43,8 +43,13 @@ function getUserDefinedCacheGroups(forceSplitting) {
     });
     return cacheGroups;
 }
+const DEPENDENCY_MATCH_TEMPL = /[\\/]node_modules[\\/](<SOURCES>)[\\/]/.source;
 /** Expect to match path just like "./node_modules/react-router/" */
-const createDependenciesRegExp = (...dependencies) => new RegExp(`[\\\\/]node_modules[\\\\/](${dependencies.join('|')})[\\\\/]`);
+const createDependenciesRegExp = (...dependencies) => {
+    const sources = dependencies.map(d => (typeof d === 'string' ? d : d.source));
+    const expr = DEPENDENCY_MATCH_TEMPL.replace('<SOURCES>', sources.join('|'));
+    return new RegExp(expr);
+};
 exports.createDependenciesRegExp = createDependenciesRegExp;
 async function splitByExperience(ctx) {
     const { isPackageInstalled } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
@@ -52,7 +57,7 @@ async function splitByExperience(ctx) {
     const experienceCacheGroup = {};
     const packageRegExps = {
         react: (0, exports.createDependenciesRegExp)('react', 'react-dom'),
-        router: (0, exports.createDependenciesRegExp)('react-router', 'react-router-dom', 'history'),
+        router: (0, exports.createDependenciesRegExp)('react-router', 'react-router-dom', '@remix-run/router', 'history'),
         lodash: (0, exports.createDependenciesRegExp)('lodash', 'lodash-es'),
     };
     // Detect if the package is installed in current project
@@ -61,13 +66,13 @@ async function splitByExperience(ctx) {
         packageRegExps.antd = (0, exports.createDependenciesRegExp)('antd');
     }
     if (isPackageInstalled('@arco-design/web-react', rootPath)) {
-        packageRegExps.arco = (0, exports.createDependenciesRegExp)('arco-design');
+        packageRegExps.arco = (0, exports.createDependenciesRegExp)(/@?arco-design/);
     }
     if (isPackageInstalled('@douyinfe/semi-ui', rootPath)) {
-        packageRegExps.semi = (0, exports.createDependenciesRegExp)('semi-ui');
+        packageRegExps.semi = (0, exports.createDependenciesRegExp)(/@(ies|douyinfe)[\\/]semi-.*/);
     }
     if (polyfill === 'entry' || polyfill === 'usage') {
-        packageRegExps.polyfill = (0, exports.createDependenciesRegExp)('core-js', '@babel/runtime');
+        packageRegExps.polyfill = (0, exports.createDependenciesRegExp)('core-js', '@babel/runtime', '@swc/helpers');
     }
     Object.entries(packageRegExps).forEach(([name, test]) => {
         const key = `lib-${name}`;

package/dist/plugins/svg.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.builderPluginSvg = exports.getCompiledPath = void 0;
-const path_1 = require("path");
+const path_1 = __importDefault(require("path"));
 const builder_shared_1 = require("@modern-js/builder-shared");
-const getCompiledPath = (packageName) => (0, path_1.join)(__dirname, '../../compiled', packageName);
+const getCompiledPath = (packageName) => path_1.default.join(__dirname, '../../compiled', packageName);
 exports.getCompiledPath = getCompiledPath;
 const builderPluginSvg = () => {
     return {
@@ -15,14 +18,14 @@ const builderPluginSvg = () => {
                 const assetType = 'svg';
                 const distDir = (0, builder_shared_1.getDistPath)(config.output, 'svg');
                 const filename = (0, builder_shared_1.getFilename)(config.output, 'svg', isProd);
-                const outputName = (0, path_1.join)(distDir, filename);
+                const outputName = path_1.default.posix.join(distDir, filename);
                 const maxSize = config.output.dataUriLimit[assetType];
                 const rule = chain.module.rule(CHAIN_ID.RULE.SVG).test(builder_shared_1.SVG_REGEX);
                 // If we import SVG from a CSS file, it will be processed as assets.
                 (0, builder_shared_1.chainStaticAssetRule)({
                     rule,
                     maxSize,
-                    filename: (0, path_1.join)(distDir, filename),
+                    filename: path_1.default.posix.join(distDir, filename),
                     assetType,
                     issuer: {
                         // The issuer option ensures that SVGR will only apply if the SVG is imported from a JS file.
@@ -54,7 +57,7 @@ const builderPluginSvg = () => {
                     .type('javascript/auto')
                     .use(CHAIN_ID.USE.SVGR)
                     .loader(require.resolve('@svgr/webpack'))
-                    .options({ svgo: false })
+                    .options({ svgo: true })
                     .end()
                     .when(defaultExport === 'url', c => c
                     .use(CHAIN_ID.USE.URL)

package/package.json

@@ -14,7 +14,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.8.0",
+  "version": "2.10.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@svgr/webpack": "6.5.1",
-    "@modern-js/builder-shared": "2.8.0",
-    "@modern-js/utils": "2.8.0"
+    "@modern-js/builder-shared": "2.10.0",
+    "@modern-js/utils": "2.10.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.8.0"
+    "@scripts/vitest-config": "2.10.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",