chore: 📦 Optimize npm package size (#23698)

* improve custom theme import path

* reduce npm package size

.antd-tools.config.js

@@ -61,15 +61,14 @@ function finalizeCompile() {
 
 function buildThemeFile(theme, vars) {
   // Build less entry file: dist/antd.${theme}.less
-  fs.writeFileSync(
+  if (theme !== 'default') {
-    path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+    fs.writeFileSync(
-    `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+      path.join(process.cwd(), 'dist', `antd.${theme}.less`),
-  );
+      `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
-
+    );
-  // eslint-disable-next-line no-console
+    // eslint-disable-next-line no-console
-  console.log(`Built a entry less file to dist/antd.${theme}.less`);
+    console.log(`Built a entry less file to dist/antd.${theme}.less`);
-
+  } else {
-  if (theme === 'default') {
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', `default-theme.js`),
       `module.exports = ${JSON.stringify(vars, null, 2)};\n`,

.gitignore

@@ -25,6 +25,7 @@ nohup.out
 _site
 _data
 dist
+report.html
 /lib
 /es
 elasticsearch-*
@@ -55,4 +56,4 @@ site/theme/template/Content/EditButton.jsx
 site/theme/template/Resources/*.jsx
 site/theme/template/Resources/**/*.jsx
 site/theme/template/NotFound.jsx
-scripts/previewEditor/index.html
+scripts/previewEditor/index.html

.npmignore

@@ -1,2 +1 @@
 ~*
-dist/report.html

docs/react/customize-theme.en-US.md

@@ -97,7 +97,7 @@ Follow [Use in create-react-app](/docs/react/use-with-create-react-app).
 Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
 
 ```css
-@import '~antd/es/style/themes/default.less';
+@import '~antd/lib/style/themes/default.less';
 @import '~antd/dist/antd.less'; // Import Ant Design styles by less entry
 @import 'your-theme-file.less'; // variables to override above
 ```
@@ -117,7 +117,7 @@ It's possible to configure webpack to load an alternate less file:
 ```ts
 new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
 
-#antd { @import '~antd/es/style/core/index.less'; @import '~antd/es/style/themes/default.less'; }
+#antd { @import '~antd/lib/style/core/index.less'; @import '~antd/lib/style/themes/default.less'; }
 ```
 
 Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.

docs/react/customize-theme.zh-CN.md

@@ -97,7 +97,7 @@ module.exports = {
 另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
 
 ```css
-@import '~antd/es/style/themes/default.less';
+@import '~antd/lib/style/themes/default.less';
 @import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件
 @import 'your-theme-file.less'; // 用于覆盖上面定义的变量
 ```

docs/spec/colors.en-US.md

@@ -59,7 +59,9 @@ We provide Less and JavaScript usage for developers.
 - **Less**
 
   ```less
-  @import '~antd/es/style/themes/default.less', .selector {
+  @import '~antd/lib/style/themes/default.less';
+
+  .selector {
     color: @blue-5;
     background-color: @gold-2;
   }

docs/spec/colors.zh-CN.md

@@ -67,7 +67,9 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
 - **Less**
 
   ```less
-  @import '~antd/es/style/themes/default.less', .selector {
+  @import '~antd/lib/style/themes/default.less';
+
+  .selector {
     color: @blue-5;
     background-color: @gold-2;
   }

webpack.config.js

@@ -74,6 +74,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
         new BundleAnalyzerPlugin({
           analyzerMode: 'static',
           openAnalyzer: false,
+          reportFilename: '../report.html',
         }),
       );
     }