refactor: 拆分CSS资源优化文件大小

wan92hen · Sep 20, 2024 · c219acf · c219acf
1 parent d02efbe
commit c219acf
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 22 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,3 @@
-import "./styles/tailwind.css";
-import "./styles/style.scss";
-import "./styles/theme.scss";
-import "./styles/font-hack.scss";
-
 import Alpine from "alpinejs";
 import upvote from "./upvote";
 import * as tocbot from 'tocbot';

diff --git a/src/styles/font-pixel.scss b/src/styles/font-pixel.scss
@@ -0,0 +1,4 @@
+ @font-face {
+  font-family: Ark-Pixel-12-proportional-zh_cn;
+  src: url("../fonts/fusion-pixel-12px-proportional-zh_hans.woff2");
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -10,11 +10,6 @@ html {
   box-sizing: inherit;
 }
 
-@font-face {
-  font-family: Ark-Pixel-12-proportional-zh_cn;
-  src: url("../fonts/fusion-pixel-12px-proportional-zh_hans.woff2");
-}
-
 body {
   margin: 0;
   padding: 0;

diff --git a/src/styles/style.scss b/src/styles/style.scss
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind utilities;
+@tailwind components;
+
 @import 'buttons';
 @import 'header';
 @import 'logo';
@@ -6,3 +10,5 @@
 @import 'pagination';
 @import 'footer';
 @import 'typed-text';
+
+@import 'theme';
diff --git a/templates/modules/layout.html b/templates/modules/layout.html
@@ -5,13 +5,17 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title th:text="${site.title}"></title>
-    <link rel="stylesheet" th:href="@{/assets/dist/style.css}" href="./assets/dist/style.css" />
-    <script th:src="@{/assets/dist/main.iife.js}"></script>
-    <style th:if="${theme.config.basic.pixel_style}">
-      body {
-        font-family: Ark-Pixel-12-proportional-zh_cn, serif;
-      }
-    </style>
+    <link rel="stylesheet" th:href="@{/assets/dist/style.css}" />
+    <link rel="stylesheet" th:href="@{/assets/dist/font-hack.css}" />
+    <th:block th:if="${theme.config.basic.pixel_style}">
+      <link rel="stylesheet" th:href="@{/assets/dist/font-pixel.css}" />
+      <style th:inline="css">
+        body {
+          font-family: Ark-Pixel-12-proportional-zh_cn, serif;
+        }
+      </style>
+    </th:block>
+    <script th:src="@{/assets/dist/main.js}"></script>
   </head>
 
   <body class="main">

diff --git a/vite.config.ts b/vite.config.ts
@@ -4,15 +4,22 @@ import path from "path";
 import PurgeIcons from "vite-plugin-purge-icons";
 
 export default defineConfig({
+  base: "",
   plugins: [PurgeIcons()],
   build: {
     outDir: fileURLToPath(new URL("./templates/assets/dist", import.meta.url)),
     emptyOutDir: true,
-    lib: {
-      entry: path.resolve(__dirname, "src/main.ts"),
-      name: "main",
-      fileName: "main",
-      formats: ["iife"],
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, "src/main.ts"),
+        style: path.resolve(__dirname, "src/styles/style.scss"),
+        fontHack: path.resolve(__dirname, "src/styles/font-hack.scss"),
+        fontPixel: path.resolve(__dirname, "src/styles/font-pixel.scss"),
+      },
+      output: {
+        entryFileNames: "[name].js",
+        assetFileNames: "[name].[ext]",
+      },
     },
   },
 });