Based on Umi to provide Rspack support and other best practices
npm version downloads node version license
English | 简体中文
Kmi provides Rspack support and modern web development best practices for UmiJS. It aims to provide faster and more efficient development experience with better build performance.
- Rspack Integration: Uses Rspack as the build tool, providing several times faster build speed compared to Webpack
- Smooth Fallback: Provides support for traditional toolchains like terser and postcss to ensure project stability. New projects can seamlessly use next-generation toolchains like lightningcss and swc for performance improvements
- Easy to Use: Easily switch between Rspack/Webpack build modes through configuration toggles, with quick fallback when issues arise
- Unified Interface: Provides unified configuration interface that abstracts away differences in underlying build tools, reducing learning costs
Kmi requires the latest Umi support. If your current Umi version is lower than
4.4.11, please upgradeumior@umijs/maxbefore proceeding.
npm init @kmijs/kmi@latest hello-kmi
hello-kmiis your project name, please specify according to your actual needs
Run the pnpm dev command
pnpm dev
# Create a new Umi project npx create-umi@latest my-rspack-app cd my-rspack-app # Install dependencies pnpm install
Create or modify the .umirc.ts file in the project root directory:
import { defineConfig } from 'umi'; export default defineConfig({ // Configure Kmi preset presets: ['@kmijs/preset-bundler'], // Enable Rspack rspack: {}, // Other Umi configurations... routes: [ { path: '/', component: 'index' }, { path: '/users', component: 'users' }, ], });
- Modify Webpack(Rspack) configuration object via bundler option
import { defineConfig } from 'umi'; export default defineConfig({ // Configure Kmi preset presets: ['@kmijs/preset-bundler'], // Enable Rspack rspack: {}, // Modify Webpack(Rspack) configuration object via bundler option bundler: { resolve: { // Merged with built-in resolve.extensions extensions: ['.web.tsx'], } } });
- Modify Webpack(Rspack) configuration in function form
import { defineConfig } from 'umi'; export default defineConfig({ // Configure Kmi preset presets: ['@kmijs/preset-bundler'], // Enable Rspack rspack: {}, // Modify Webpack(Rspack) configuration in function form async bundler (config, { isProd }) { // This is just an example if (isProd) { chain.devtool('source-map'); } const { default: ESLintPlugin } = await import('eslint-webpack-plugin'); config.plugins?.push(new ESLintPlugin()); return config } });
- Modify Webpack(Rspack) configuration using chain programming
import { defineConfig } from 'umi'; export default defineConfig({ // Configure Kmi preset presets: ['@kmijs/preset-bundler'], // Enable Rspack rspack: {}, // Through bundler you can get plugins that are compatible with both Webpack and Rspack bundlerChain (config, { bundler }) { // This is just an example config.plugin('custom-define').use(bundler.DefinePlugin, [ { 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), }, ]); return config; } });
# Start the development server
pnpm dev# Build the application
pnpm buildIf you find this helpful, welcome to give us a star ⭐️⭐️⭐️