同样的配置 rsbuild和 vite 构建，产物rsbuild 的产物比vite 构建的大近200k,

[canyuegongzi]

最近尝试将之前的工程迁移到 rsbuid, 发现最后的产物 rsbuild 版的比较大，

以下是vite 配置

import {
  defineConfig,
} from 'vite'
import react from '@vitejs/plugin-react'
import autoprefixer from 'autoprefixer'
// @ts-ignore
import windi from "vite-plugin-windicss"
import tsconfigPaths from "vite-tsconfig-paths";
// import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

const nodeEnv = process.env.NODE_ENV === 'production' ? '"production"' : '"development"';
// https://vitejs.dev/config/
export default defineConfig({
  define: { 'process.env.NODE_ENV': nodeEnv },
  plugins: [
    react(),
    windi(),
    tsconfigPaths(),
    /*cssInjectedByJsPlugin({
      // topExecutionPriority: false
    })*/
  ],
  // css 相关的配置
  css: {
    preprocessorOptions: {
      scss: {}
    },
    modules: {
      // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
      // 其中，name 表示当前文件名，local 表示类名
      generateScopedName: "[name]__[local]___[hash:base64:5]"
    },
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        // @ts-ignore
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  },
  server: {
    headers: {},
    watch: {

    }
  },
  build: {
    lib: {
      // formats: ['umd', 'es', 'cjs', 'iife'],
      formats: ['umd'],
      entry:  './src/main.tsx', // 设置入口文件
      name: 'SandboxEditor',
      fileName: (format) => `sandbox-editor.${format}.js` // 打包后的文件名
    },
    sourcemap: false, // 输出.map文件
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        }
      }
    }
  }
})

这是rsbuild 的

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginUmd } from '@rsbuild/plugin-umd';
// import { pluginNodePolyfill } from '@rsbuild/plugin-node-polyfill';
const nodeEnv = process.env.NODE_ENV === 'production' ? '"production"' : '"development"';
export default defineConfig({
  plugins: [
    // pluginNodePolyfill(),
    pluginReact(),
    pluginUmd({
      name: 'SandboxEditor',
    })
  ],
  source: {
    alias: {
      '@': './src/',
    },
    entry: {
      index: './src/main.tsx'
    },
    define: { 'process.env.NODE_ENV': nodeEnv },
  },
  tools: {
    less: {
      lessOptions: {
        javascriptEnabled: false
      },
      /*additionalData: `
					@import (reference) "@/assets/theme.less";
				`,*/
    },
    postcss: {
      postcssOptions: {
        // plugins: [require('tailwindcss')],
      },
    },
  },
  output: {
    polyfill: 'usage',
    // legalComments: 'none',
    filename: {
      js: `sandbox-editor.umd.js`,
      css: 'style.css'
    },
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM',
    },
    sourceMap: {
      css: false,
      js: false
        /*process.env.NODE_ENV === 'production'
          ? // 生产环境使用高质量的 source map 格式
          'source-map'
          : // 开发环境使用性能更好的 source map 格式
          'cheap-module-source-map',*/
    },
  }
});

[chenjiahan]

这个可能是 tree-shaking 层面的问题，能否提供一个复现仓库看下呢，或者定位一下是哪个包的 tree-shaking 没有生效

[canyuegongzi]

内部的项目，空了拆分个最小化的demo 仓库，大致分析了下构建产物 好像队对于这种export 的包，没做tree-shaking

[canyuegongzi]

好像知道问题所在了 vite 没有注入 polyfill， rsbuild 默认开始了 polyfill

[chenjiahan]

你可以把 polyfill 设置为 off 看一下哈