1+ import path from 'node:path' ;
2+ import { pluginHtmlMinifierTerser } from 'rsbuild-plugin-html-minifier-terser' ;
3+ import { pluginMockServer } from 'rspack-plugin-mock/rsbuild' ;
4+ import { defineConfig } from '@rsbuild/core' ;
5+ import { pluginImageCompress } from '@rsbuild/plugin-image-compress' ;
6+ import { pluginBabel } from '@rsbuild/plugin-babel' ;
7+ import { pluginReact } from '@rsbuild/plugin-react' ;
8+ import { pluginSvgr } from '@rsbuild/plugin-svgr' ;
9+ import { pluginSass } from '@rsbuild/plugin-sass' ;
10+
11+ const isDev = process . env . NODE_ENV === 'development' ;
12+
13+ export default defineConfig ( {
14+ plugins : [
15+ // 表示将react和router相关的包拆分为单独的chunk
16+ pluginReact ( {
17+ splitChunks : {
18+ react : true ,
19+ router : true ,
20+ } ,
21+ } ) ,
22+ pluginBabel ( {
23+ include : / \. (?: j s x | t s x ) $ / ,
24+ babelLoaderOptions ( opts ) {
25+ opts . plugins ?. unshift ( 'babel-plugin-react-compiler' ) ;
26+ } ,
27+ } ) ,
28+ // 将SVG转换为React组件
29+ pluginSvgr ( ) ,
30+ pluginSass ( {
31+ // sass文件默认注入全局的变量文件
32+ sassLoaderOptions : {
33+ additionalData : `@use 'src/styles/variables.scss' as *;` ,
34+ } ,
35+ } ) ,
36+ // mock 插件
37+ pluginMockServer ( {
38+ // 表示拦截以路径/api开头的
39+ prefix : '/api' ,
40+ } ) ,
41+ // 启动图片压缩
42+ pluginImageCompress ( ) ,
43+ // 启动html压缩
44+ pluginHtmlMinifierTerser ( {
45+ collapseBooleanAttributes : true ,
46+ collapseInlineTagWhitespace : true ,
47+ collapseWhitespace : true ,
48+ minifyCSS : true ,
49+ minifyJS : true ,
50+ } ) ,
51+ ] ,
52+ // 配置html模板
53+ html : {
54+ template : './index.html' ,
55+ } ,
56+ // 配置路径别名
57+ resolve : {
58+ alias : {
59+ '@' : path . resolve ( __dirname , './src' ) ,
60+ // 将三方依赖中对lodash的依赖重定向到lodash-es
61+ lodash : 'lodash-es' ,
62+ 'lodash-es' : path . resolve ( __dirname , 'node_modules/lodash-es' ) ,
63+ react : path . resolve ( __dirname , 'node_modules/react' ) ,
64+ } ,
65+ extensions : [ '.js' , '.jsx' , '.ts' , '.tsx' , '.json' ] ,
66+ // 通过rsdcotor分析出来的打包时重复包
67+ dedupe : [ '@babel/runtime' , 'tslib' , 'rc-switch' , 'rc-checkbox' , 'clsx' , 'react-is' ] ,
68+ } ,
69+ dev : {
70+ // 按需编译
71+ lazyCompilation : true ,
72+ // 启用热更新
73+ hmr : true ,
74+ // 显示编译进度条
75+ // progressBar: true,
76+ } ,
77+ // 构建产物相关配置
78+ output : {
79+ sourceMap : {
80+ js : isDev ? 'cheap-module-source-map' : false , // 开发环境开启js的sourceMap
81+ css : isDev ,
82+ } ,
83+ cleanDistPath : true , // 每次构建前清理dist目录
84+ charset : 'utf8' , // 设置输出文件的编码
85+ } ,
86+ source : {
87+ // 配置装饰器语法用于支持@injectable()和@inject装饰器
88+ decorators : {
89+ version : 'legacy' ,
90+ } ,
91+ } ,
92+
93+ // 构建优化相关
94+ performance : {
95+ chunkSplit : {
96+ strategy : 'split-by-experience' ,
97+ // 下面的部分单独分包(这里暂时不分包-原因是：后续的测试中发现不配置下面的选项页面加载反而更快)
98+ forceSplitting : {
99+ axios : / n o d e _ m o d u l e s [ \\ / ] a x i o s / ,
100+ antd : / n o d e _ m o d u l e s [ \\ / ] a n t d / ,
101+ // echarts: /node_modules[\\/]echarts/,
102+ // zrender: /node_modules[\\/]zrender/,
103+ // antdIcons: /node_modules[\\/]@ant-design\/icons/,
104+ // 'rc-cp': /node_modules[\\/]rc-/,
105+ } ,
106+ } ,
107+ // 启用构建缓存
108+ buildCache : ! isDev ,
109+ // 移除console.[method]语句
110+ removeConsole : true ,
111+ // 开启包文件分析
112+ // bundleAnalyze: {
113+ // openAnalyzer: isDev, // 是否开启包文件分析，现在仅在开发环境下开启
114+ // analyzerMode: 'static',
115+ // reportFilename: 'bundle-report.html',
116+ // },
117+ } ,
118+ // 服务相关
119+ server : {
120+ port : 8000 ,
121+ proxy : {
122+ '/api' : {
123+ target : 'http://localhost:9193' ,
124+ changeOrigin : true ,
125+ pathRewrite : ( path ) => path . replace ( / ^ \/ a p i / , '' ) ,
126+ } ,
127+ } ,
128+ } ,
129+ } ) ;
0 commit comments