chore: 📦 Optimize npm package size (#23698)

* improve custom theme import path

* reduce npm package size
This commit is contained in:
偏右 2020-04-28 14:11:43 +08:00 committed by GitHub
parent f5153ab950
commit c27a3a40a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 20 additions and 16 deletions

View File

@ -61,15 +61,14 @@ function finalizeCompile() {
function buildThemeFile(theme, vars) { function buildThemeFile(theme, vars) {
// Build less entry file: dist/antd.${theme}.less // 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( fs.writeFileSync(
path.join(process.cwd(), 'dist', `default-theme.js`), path.join(process.cwd(), 'dist', `default-theme.js`),
`module.exports = ${JSON.stringify(vars, null, 2)};\n`, `module.exports = ${JSON.stringify(vars, null, 2)};\n`,

1
.gitignore vendored
View File

@ -25,6 +25,7 @@ nohup.out
_site _site
_data _data
dist dist
report.html
/lib /lib
/es /es
elasticsearch-* elasticsearch-*

View File

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

View File

@ -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`. Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
```css ```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 '~antd/dist/antd.less'; // Import Ant Design styles by less entry
@import 'your-theme-file.less'; // variables to override above @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 ```ts
new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') ) 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. 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.

View File

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

View File

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

View File

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

View File

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