build后文件体积偏大

[zcy97]

重现链接或代码

import React, { useState } from 'react'
import { Button } from '@kdcloudjs/kdesign'

const App: React.FC = () => {
  const [num, setNum] = useState<number>(0)
  return <Button onClick={() => setNum((prev) => prev + 1)}>{num}</Button>
}

export default App

ReactDOM.render(<App/>, mountNode)

// webpack.common.js
const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, '../src/index.tsx'),
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'index.js',
    clean: true,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8192,
          },
        },
      },
    ],
  },
}

// webpack.prod.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const TerserPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 无需注释提取到单独的文件中
      }),
      new CssMinimizerPlugin(),
    ],
  },
})

重现问题步骤

yarn build

期望的结果是什么

期望做些tree shaking相关优化

实际的结果是什么

只引入一个Button打包后的体积就到了1.13MB

组件库版本号、浏览器信息

组件库与浏览器均为最新版本