lazy-load antd resources

src/FilterLists.Web.V2/config-overrides.js

@@ -0,0 +1,9 @@
+const { override, fixBabelImports } = require('customize-cra');
+
+module.exports = override(
+    fixBabelImports('import', {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: 'css',
+    }),
+);

src/FilterLists.Web.V2/package.json

@@ -8,15 +8,18 @@
     "@types/react": "16.8.24",
     "@types/react-dom": "16.8.5",
     "antd": "^3.21.0",
+    "babel-plugin-import": "^1.12.0",
+    "customize-cra": "^0.4.1",
     "react": "^16.8.6",
+    "react-app-rewired": "^2.1.3",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
     "typescript": "3.5.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   },
   "proxy": "https://filterlists.com",

src/FilterLists.Web.V2/src/App.css

@@ -1,5 +1,3 @@
-@import "~antd/dist/antd.css";
-
 .App {
   text-align: center;
 }

src/FilterLists.Web.V2/src/App.tsx

@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { Button } from 'antd';
 
 const App: React.FC = () => {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Button type="primary">Button</Button>
     </div>
   );
 }