diff --git a/.eslintignore b/.eslintignore
index 468b05e9b3bf01d352d38740d41501137c5e526f..29a10d6f6c0c0ebe7cd4586eb6a691d45ca96b6c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,6 @@
 src/registerServiceWorker.js
 src/**/test/**
-config-overrides.js
+craco.config.js
 /build
 /config
 src/serviceWorker.js
diff --git a/.gitignore b/.gitignore
index 82c1b4cc58752f6a834b3304e2aea92f674ac7e7..9c8cf7644ff7f8782cf08b017fce40fd02ac43b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 .AppleDouble
 .LSOverride
 node_modules/
+.idea/
 
 
 # Icon must end with two \r
diff --git a/config-overrides.js b/config-overrides.js
deleted file mode 100644
index 58b49e4d3b7487585e2655671e9d623e005058ba..0000000000000000000000000000000000000000
--- a/config-overrides.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable */
-const { override, addWebpackAlias, fixBabelImports, addWebpackPlugin, adjustStyleLoaders } = require('customize-cra')
-const path = require('path')
-const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
-
-if (process.env.NODE_ENV === 'production') {
-  process.env.GENERATE_SOURCEMAP = 'false'
-}
-
-function resolve(dir) {
-  return path.join(__dirname, dir)
-}
-
-const addCustomize = () => (config) => {
-  return config
-}
-
-module.exports = override(
-  fixBabelImports('import', {
-    libraryName: 'antd',
-    libraryDirectory: 'es',
-    style: true // 自动打包相关的样式
-  }),
-
-  // 配置路径别名
-  addWebpackAlias({
-    '@': resolve('src')
-  }),
-
-  // 替换moment.js
-  addWebpackPlugin(new AntdDayjsWebpackPlugin()),
-
-  adjustStyleLoaders((rule) => {
-    if (rule.test.toString().includes('scss')) {
-      rule.use.push({
-        loader: require.resolve('sass-resources-loader'),
-        options: {
-          resources: [
-            './src/styles/_variables.scss', //这里是你自己放公共scss变量的路径
-            './src/styles/_mixins.scss', 
-          ]
-        }
-      })
-    }
-  })
-)
diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..36c3beb1a1d1f3f09182d234f07d00370074f855
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,69 @@
+/* craco.config.js */
+/**
+ * TODO: 区分环境 —— NODE_ENV
+ * - whenDev ☞ process.env.NODE_ENV === 'development'
+ * - whenTest ☞ process.env.NODE_ENV === 'test'
+ * - whenProd ☞ process.env.NODE_ENV === 'production'
+ */
+ const { when, whenDev, whenProd, whenTest } = require('@craco/craco')
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
+// const FastRefreshCracoPlugin = require('craco-fast-refresh')
+const path = require('path');
+
+// 判断编译环境是否为生产
+const isProduction = process.env.NODE_ENV === 'production'
+
+if (isProduction) {
+  process.env.GENERATE_SOURCEMAP = 'false'
+}
+
+const resolve = (dir) => path.join(__dirname, dir);
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@': resolve('src'),
+      '@api': resolve('src/api'),
+      '@assects': resolve('src/assets'),
+      '@compontents': resolve('src/compontents'),
+      '@config': resolve('src/config'),
+      '@hooks': resolve('src/hooks'),
+      '@hooks': resolve('src/interface'),
+      '@hooks': resolve('src/layouts'),
+      '@hooks': resolve('src/model'),
+      '@hooks': resolve('src/router'),
+      '@hooks': resolve('src/store'),
+      '@hooks': resolve('src/styles'),
+      '@hooks': resolve('src/typings'),
+      '@hooks': resolve('src/utils'),
+      '@hooks': resolve('src/views'),
+    },
+    plugins: [
+      // 观察打包进度
+      new SimpleProgressWebpackPlugin(),
+      // 时间转换工具采取day替换moment
+      new AntdDayjsWebpackPlugin(),
+      ...when(
+        !isProduction, () => [
+          // 打包分析，生产环境关闭
+          new BundleAnalyzerPlugin()
+        ], []
+      ),
+    ]
+  },
+  babel: {
+    plugins: [
+      // AntDesign 按需加载
+      ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
+      // 用来支持装饰器
+      ['@babel/plugin-proposal-decorators', { legacy: true }]
+    ],
+  },
+  plugins: [
+    // {
+    //   plugin: FastRefreshCracoPlugin
+    // }
+  ]
+}
diff --git a/package.json b/package.json
index 9dcc2c266b38656e947a1767d8b2e3ef4b55adad..598c084170b401ba331b8caa70f4f644e0650ab0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "homepage": "/react-store-admin",
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@craco/craco": "^6.2.0",
     "@icon-park/react": "^1.3.3",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.11",
@@ -27,13 +28,15 @@
     "react-scripts": "4.0.3",
     "react-transition-group": "^4.4.2",
     "screenfull": "^5.1.0",
-    "web-vitals": "^1.1.2"
+    "simple-progress-webpack-plugin": "^2.0.0",
+    "web-vitals": "^1.1.2",
+    "webpack-bundle-analyzer": "^4.4.2"
   },
   "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired --max-old-space-size=4096 build",
-    "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject",
+    "start": "craco start",
+    "build": "craco --max-old-space-size=4096 build",
+    "test": "craco test",
+    "eject": "react-scripts eject",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ."
   },
   "eslintConfig": {
@@ -77,7 +80,6 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "node-sass": "^6.0.0",
-    "react-app-rewired": "^2.1.8",
     "sass-resources-loader": "^2.2.3",
     "typescript": "^4.3.4",
     "typescript-plugin-css-modules": "^3.4.0"