feature/improve-bundle-performance (#555)

* revert icon

* chunk code for better performance / reduce request

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/App.vue

@@ -136,3 +136,4 @@ export default {
   scrollbar-color: transparent transparent;
 }
 </style>
+

frontend/src/components/UI/CardSection.vue

@@ -16,7 +16,7 @@
         <template v-slot:activator="{ on, attrs }">
           <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
             <v-icon :left="!$vuetify.breakpoint.xsOnly">
-              {{ $globals.icons.diceMultiple }}
+              {{ $globals.icons.sort }}
             </v-icon>
             {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
           </v-btn>

frontend/src/main.js

@@ -6,7 +6,6 @@ import VueRouter from "vue-router";
 import { router } from "./routes";
 import { globals } from "@/utils/globals";
 import i18n from "./i18n";
-// import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
 import "./registerServiceWorker";
 

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -107,13 +107,17 @@
 </template>
 
 <script>
-import VJsoneditor from "v-jsoneditor";
 import { api } from "@/api";
 import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
 import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
 import StatCard from "@/components/UI/StatCard";
 export default {
-  components: { StatCard, BaseDialog, ColorPickerDialog, VJsoneditor },
+  components: {
+    StatCard,
+    BaseDialog,
+    ColorPickerDialog,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
+  },
   data() {
     return {
       jsonEditor: false,

frontend/src/pages/Recipe/NewRecipe.vue

@@ -28,11 +28,10 @@
 import { api } from "@/api";
 
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
-import VJsoneditor from "v-jsoneditor";
 import RecipePageActionMenu from "@/components/Recipe/RecipePageActionMenu";
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
     RecipeEditor,
     RecipePageActionMenu,
   },

frontend/src/pages/Recipe/ScraperDebugger.vue

@@ -3,7 +3,7 @@
     <v-text-field v-model="testUrl" outlined single-line label="Recipe Url"> </v-text-field>
     <div class="d-flex">
       <v-btn class="mt-0 ml-auto" color="info" @click="getTestData">
-        <v-icon left> {{ $globals.icons.testTube}} </v-icon>
+        <v-icon left> {{ $globals.icons.testTube }} </v-icon>
         Test Scrape
       </v-btn>
     </div>
@@ -12,11 +12,10 @@
 </template>
 
 <script>
-import VJsoneditor from "v-jsoneditor";
 import { api } from "@/api";
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
   },
   data() {
     return {

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -70,7 +70,6 @@
 import RecipePageActionMenu from "@/components/Recipe/RecipePageActionMenu.vue";
 import { api } from "@/api";
 import FavoriteBadge from "@/components/Recipe/FavoriteBadge";
-import VJsoneditor from "v-jsoneditor";
 import RecipeViewer from "@/components/Recipe/RecipeViewer";
 import PrintView from "@/components/Recipe/PrintView";
 import RecipeEditor from "@/components/Recipe/RecipeEditor";
@@ -82,7 +81,7 @@ import CommentsSection from "@/components/Recipe/CommentSection";
 
 export default {
   components: {
-    VJsoneditor,
+    VJsoneditor: () => import(/* webpackChunkName: "json-editor" */ "v-jsoneditor"),
     RecipeViewer,
     RecipeEditor,
     RecipeTimeCard,

frontend/src/routes/admin.js

@@ -1,11 +1,11 @@
-const Admin = () => import("@/pages/Admin");
-const Migration = () => import("@/pages/Admin/Migration");
-const Profile = () => import("@/pages/Admin/Profile");
-const ManageUsers = () => import("@/pages/Admin/ManageUsers");
-const Settings = () => import("@/pages/Admin/Settings");
-const About = () => import("@/pages/Admin/About");
-const ToolBox = () => import("@/pages/Admin/ToolBox");
-const Dashboard = () => import("@/pages/Admin/Dashboard");
+const Admin = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin");
+const Migration = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Migration");
+const Profile = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Profile");
+const ManageUsers = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/ManageUsers");
+const Settings = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Settings");
+const About = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/About");
+const ToolBox = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/ToolBox");
+const Dashboard = () => import(/* webpackChunkName: "admin-pages" */ "@/pages/Admin/Dashboard");
 import { store } from "../store";
 
 export const adminRoutes = {

frontend/src/routes/recipes.js

@@ -1,5 +1,5 @@
-const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
-const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
+const ViewRecipe = () => import(/* webpackChunkName: "recipe-page" */ "@/pages/Recipe/ViewRecipe");
+const NewRecipe = () => import(/* webpackChunkName: "recipe-page" */ "@/pages/Recipe/NewRecipe");
 const ScraperDebugger = () => import("@/pages/Recipe/ScraperDebugger");
 const CustomPage = () => import("@/pages/Recipes/CustomPage");
 const AllRecipes = () => import("@/pages/Recipes/AllRecipes");