refactor: preformance changes

barelyhuman · barelyhuman · commit 65cb12b78c79 · 2021-08-25T11:47:36.000+05:30
diff --git a/index.html b/index.html
@@ -3,6 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+
+    <link
+      rel="preload"
+      href="https://unpkg.com/highlight.js@11.0.1/styles/ascetic.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://unpkg.com/highlight.js@11.0.1/styles/ascetic.css"
+    /></noscript>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mark</title>
 
diff --git a/package.json b/package.json
@@ -11,13 +11,14 @@
     "codejar": "^3.5.0",
     "highlight.js": "^11.2.0",
     "marked": "^3.0.2",
-    "tailwindcss": "^2.2.7",
     "vue": "^3.0.5"
   },
   "devDependencies": {
+    "tailwindcss": "^2.2.7",
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/compiler-sfc": "^3.0.5",
     "autoprefixer": "^10.3.2",
+    "cssnano": "^5.0.8",
     "postcss": "^8.3.6",
     "vite": "^2.4.4"
   }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+    cssnano: {},
+  },
+};
diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -9,9 +9,16 @@
   </div>
 </template>
 <script>
-import { reactive, ref, onMounted, watchEffect } from "vue";
+import { ref, onMounted } from "vue";
 import { CodeJar } from "codejar";
-import hljs from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import markdown from "highlight.js/lib/languages/markdown";
+import golang from "highlight.js/lib/languages/go";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("go", golang);
 
 const props = {
   code: String,
diff --git a/src/main.js b/src/main.js
@@ -1,27 +1,28 @@
-import { createApp, h } from 'vue'
-import Home from './pages/Home.vue'
-import './styles/index.css'
+import { createApp, h } from "vue";
+import Home from "./pages/Home.vue";
+import "./styles/index.css";
+import "./styles/fonts.css";
 
 const routes = {
-  '/': Home
+  "/": Home,
   // TODO: add a settings page
   // "/settings": Home,
-}
+};
 
 const SimpleRouter = {
   data: () => ({
-    currentRoute: window.location.pathname
+    currentRoute: window.location.pathname,
   }),
 
   computed: {
-    CurrentComponent () {
-      return routes[this.currentRoute]
-    }
+    CurrentComponent() {
+      return routes[this.currentRoute];
+    },
   },
 
-  render () {
-    return h(this.CurrentComponent)
-  }
-}
+  render() {
+    return h(this.CurrentComponent);
+  },
+};
 
-createApp(SimpleRouter).mount('#app')
+createApp(SimpleRouter).mount("#app");
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,6 +1,3 @@
-@import url("https://unpkg.com/highlight.js@11.0.1/styles/ascetic.css");
-@import "./fonts.css";
-
 :root {
   --grid-point: 4px;
 }
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,21 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
-})
+  plugins: [vue()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          highlightjs: ["highlight.js"],
+        },
+      },
+    },
+    terserOptions: {
+      compress: {
+        passes: 10,
+      },
+    },
+  },
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,3 @@`
`1`		`-@import url("https://unpkg.com/[email protected]/styles/ascetic.css");`
`2`		`-@import "./fonts.css";`
`3`		`-`
`4`	`1`	`:root {`
`5`	`2`	`--grid-point: 4px;`
`6`	`3`	`}`