chore(unify): optimize deps automatically, clean up unused files (#18429)

Author: JessicaSachs

packages/app/package.json

@@ -72,5 +72,16 @@
     "dist",
     "lib",
     "src"
-  ]
+  ],
+  "vite": {
+    "optimizeDeps": {
+      "include": [
+        "@urql/vue",
+        "@vueuse/core",
+        "lodash",
+        "vue",
+        "vue-toast-notification"
+      ]
+    }
+  }
 }

packages/app/src/Foo.spec.tsx

@@ -1,6 +1,6 @@
 <template>
-  <div class="h-screen overflow-hidden flex flex-row bg-red">
-    <main class="min-w-0 flex-1 border-t bg-green border-gray-200 lg:flex">
+  <div class="h-screen overflow-hidden flex flex-row">
+    <main class="min-w-0 flex-1 border-t border-gray-200 lg:flex">
       <section
         aria-labelledby="primary-heading"
         class="min-w-0 flex-1 h-full flex flex-col overflow-hidden lg:order-last"

packages/app/src/Foo.vue

@@ -9,6 +9,8 @@ import Components from 'unplugin-vue-components/vite'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import OptimizationPersist from 'vite-plugin-optimize-persist'
+import PkgConfig from 'vite-plugin-package-config'
 
 // eslint-disable-next-line no-duplicate-imports
 import type { UserConfig } from 'vite'
@@ -35,29 +37,37 @@ const alias = {
 const makePlugins = (plugins) => {
   return ([
     vue(),
-    vueJsx(),
+    vueJsx(), // Used mostly for testing in *.(t|j)sx files.
     VueI18n({
       include: path.resolve(__dirname, './src/locales/**'),
       ...plugins.vueI18nOptions,
     }),
     Icons({
+      // 1em. Default, without this options is 1.2em.
+      // If you notice that your icons are bigger than they should be, this
+      // is probably why.
       scale: 1,
       customCollections: {
-      // ~icons/cy/book-x16
+        // ~icons/cy/book_x16
         cy: FileSystemIconLoader(path.resolve(__dirname, './src/assets/icons')),
         ...plugins.iconsOptions?.customCollections,
       },
       ...plugins.iconsOptions,
     }),
     Components({
-    // <i-cy-book-x16/>
       resolvers: IconsResolver({
+        // <i-cy-book_x16/>
         customCollections: ['cy'],
       }),
       ...plugins?.componentsOptions,
     }),
     WindiCSS(),
     VueSvgLoader(),
+
+    // package.json is modified and auto-updated when new cjs dependencies
+    // are added
+    PkgConfig(),
+    OptimizationPersist(),
     // For new plugins only! Merge options for shared plugins via PluginOptions.
     ...(plugins?.plugins || []),
   ])

packages/app/src/components/button/Button.vue

@@ -51,6 +51,8 @@
     "vite": "2.4.4",
     "vite-plugin-components": "0.11.3",
     "vite-plugin-icons": "0.6.3",
+    "vite-plugin-optimize-persist": "0.0.5",
+    "vite-plugin-package-config": "0.0.3",
     "vite-plugin-purge-icons": "0.7.0",
     "vite-plugin-windicss": "1.2.4",
     "vite-svg-loader": "2.1.1",
@@ -69,5 +71,42 @@
     "lib",
     "script",
     "src"
-  ]
+  ],
+  "vite": {
+    "optimizeDeps": {
+      "include": [
+        "@headlessui/vue",
+        "@iconify/iconify",
+        "@iconify/vue",
+        "@purge-icons/generated",
+        "@testing-library/cypress/add-commands",
+        "@urql/core",
+        "@urql/devtools",
+        "@urql/exchange-execute",
+        "@urql/exchange-graphcache",
+        "@urql/vue",
+        "@vue/test-utils",
+        "@vueuse/core",
+        "cypress-file-upload",
+        "dedent",
+        "fake-uuid",
+        "graphql",
+        "graphql-relay",
+        "graphql/jsutils/Path",
+        "lodash",
+        "path",
+        "prismjs",
+        "prismjs/components/prism-typescript",
+        "prismjs/components/prism-yaml",
+        "vue",
+        "vue-demi",
+        "vue-i18n",
+        "vue-prism-component",
+        "vue-prism-editor",
+        "vue-toast-notification",
+        "vue3-file-selector",
+        "wonka"
+      ]
+    }
+  }
 }