reduce bundle size caused by font

shopware · Nov 6, 2024 · a146df0 · a146df0
1 parent 7ddef21
commit a146df0
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 2 deletions.
diff --git a/.changeset/clean-readers-collect.md b/.changeset/clean-readers-collect.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Reduce bundle size caused by font
diff --git a/examples/nuxt-app/app.vue b/examples/nuxt-app/app.vue
@@ -250,7 +250,8 @@
 </template>
 
 <script setup lang="ts">
-import "@shopware-ag/meteor-component-library/dist/style.css";
+import "@shopware-ag/meteor-component-library/styles";
+import "@shopware-ag/meteor-component-library/font";
 import {
   SwCard,
   SwButton,

diff --git a/packages/component-library/.storybook/preview.ts b/packages/component-library/.storybook/preview.ts
@@ -1,5 +1,6 @@
 import type { Preview } from "@storybook/vue3";
 import "~/src/components/assets/scss/all.scss";
+import "~/src/components/assets/scss/font.scss";
 import { darkTheme, lightTheme } from "./shopwareTheme";
 import { setup } from "@storybook/vue3";
 import { createI18n } from "vue-i18n";

diff --git a/packages/component-library/package.json b/packages/component-library/package.json
@@ -9,6 +9,14 @@
   "main": "dist/common/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
+    },
+    "./styles": "./dist/index.css",
+    "./font": "./dist/fonts.css"
+  },
   "files": [
     "src",
     "dist"

diff --git a/packages/component-library/src/components/assets/scss/all.scss b/packages/component-library/src/components/assets/scss/all.scss
@@ -1,4 +1,3 @@
-@import "fonts/inter.font";
 @import "variables";
 @import "typography";
 @import "global.scss";

diff --git a/packages/component-library/src/components/assets/scss/font.scss b/packages/component-library/src/components/assets/scss/font.scss
@@ -0,0 +1 @@
+@import "fonts/inter.font";
diff --git a/packages/component-library/src/fonts.ts b/packages/component-library/src/fonts.ts
@@ -0,0 +1,3 @@
+import "./components/assets/scss/font.scss";
+
+export {};
diff --git a/packages/component-library/src/index.ts b/packages/component-library/src/index.ts
@@ -38,6 +38,7 @@ import MtInset from "./components/layout/mt-inset/mt-inset.vue";
 import MtThemeProvider from "./components/theme/mt-theme-provider.vue";
 import TooltipDirective from "./directives/tooltip.directive";
 import DeviceHelperPlugin from "./plugin/device-helper.plugin";
+
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
 

diff --git a/packages/component-library/vite.config.ts b/packages/component-library/vite.config.ts
@@ -42,8 +42,13 @@ export default defineConfig({
       formats: ["es", "cjs"],
       fileName: (format, entryName) => `${{ es: "esm", cjs: "common" }[format]}/${entryName}.js`,
     },
+    cssCodeSplit: true,
     rollupOptions: {
       external: ["vue"],
+      input: {
+        index: path.resolve(__dirname, "src/index.ts"),
+        fonts: path.resolve(__dirname, "src/fonts.ts"),
+      },
     },
   },
   css: {