perf(Monaco Editor): Performance Optimizations and Code Splitting for Editors (#128)

Signed-off-by: nitro56565 <nitro56565@gmail.com>

Author: nitro56565

package-lock.json

@@ -71,6 +71,7 @@
     "module": "^1.2.5",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-visualizer": "^5.14.0",
     "typescript": "^5.1.6",
     "vite": "^4.5.6",
     "vite-plugin-node-polyfills": "^0.9.0",

package.json

@@ -1,15 +1,17 @@
 import { Button, Dropdown, Space, message, MenuProps } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { memo, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import useAppStore from "../store/store";
 import { shallow } from "zustand/shallow";
+import { useStoreWithEqualityFn } from "zustand/traditional";
 
 function SampleDropdown({
   setLoading,
 }: {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }): JSX.Element {
-  const { samples, loadSample } = useAppStore(
+  const { samples, loadSample } = useStoreWithEqualityFn(
+    useAppStore,
     (state) => ({
       samples: state.samples,
       loadSample: state.loadSample as (key: string) => Promise<void>,
@@ -59,4 +61,4 @@ function SampleDropdown({
   );
 }
 
-export default memo(SampleDropdown);
+export default SampleDropdown;