optimize vite

app/Console/Commands/clientAssetGenerator.php

@@ -43,21 +43,23 @@ class clientAssetGenerator extends Command
         // prepare client.scss and add gfx variable
         $js = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW JS INTO client-custom \n import axios from 'axios'; \n window.axios = axios; \n \n window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';" . PHP_EOL;
         $variables = "// PLEASE DO NOT EDIT THIS FILE, \n// IF YOU WANT ADD ANY CODE CREATE NEW SCSS INTO client-custom" . PHP_EOL;
+        $appVariables = '';
         foreach ($vars as $k => $var) {
-            $variables .= '$'."$k:$var;" . PHP_EOL;
+            $appVariables .= '$' . "$k:$var;" . PHP_EOL;
         }
-        $variables .= ":root{" . PHP_EOL;
+        $appVariables .= ":root{" . PHP_EOL;
         foreach ($vars as $k => $var) {
-            $variables .= "--$k:$var;" . PHP_EOL;
+            $appVariables .= "--$k:$var;" . PHP_EOL;
         }
-        $variables .= "}" . PHP_EOL . PHP_EOL;
+        $appVariables .= "}" . PHP_EOL . PHP_EOL;
 
+        file_put_contents(resource_path() . '/sass/client-custom/_app_variables.scss', $appVariables);
         // add custom scss and js
         $files = File::allFiles(resource_path() . '/sass/client-custom');
 
         foreach ($files as $file) {
             if ($file->getType() == 'file' && $file->getExtension() == 'scss') {
-                $variables .= '@import "client-custom/' .
+                $variables .= '@use "client-custom/' .
                     substr(trim($file->getBasename(), '_'), 0, -5)
                     . '";' . PHP_EOL;
             }
@@ -75,7 +77,7 @@ class clientAssetGenerator extends Command
         // add parts scss & js
         foreach (Part::distinct()->get() as $part) {
             if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.scss') > 10) {
-                $variables .= '@import "../views/segments/' . $part->segment . '/'
+                $variables .= '@use "../views/segments/' . $part->segment . '/'
                     . $part->part . '/' . $part->part . '";' . PHP_EOL;
             }
             if (filesize(__DIR__ . '/../../../resources/views/segments/' . $part->segment . '/' . $part->part . '/' . $part->part . '.js') > 10) {
@@ -85,7 +87,17 @@ class clientAssetGenerator extends Command
         }
 
         // save scss
-        file_put_contents(resource_path() . '/sass/client.scss', $variables);
-        file_put_contents(resource_path() . '/js/client.js', $js);
+        file_put_contents(resource_path() . '/sass/client.scss', $this->removeDuplicateLines($variables));
+        file_put_contents(resource_path() . '/js/client.js', $this->removeDuplicateLines( $js ));
+    }
+
+
+    // remove duplicate lines
+    private function removeDuplicateLines($text)
+    {
+        $lines = explode("\n", $text);
+        $uniqueLines = array_unique($lines);
+        $uniqueText = implode("\n", $uniqueLines);
+        return $uniqueText;
     }
 }

package.json

@@ -14,7 +14,8 @@
         "laravel-vite-plugin": "^1.0",
         "sass": "^1.56.1",
         "vite": "^5.0",
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "path": "^0.12.7"
     },
     "dependencies": {
         "bs5-lightbox": "^1.8.3",

resources/js/client-vue/vueDateTimePickerClient.vue

@@ -918,7 +918,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/FontAwesomeIconPicker.vue

@@ -2574,7 +2574,6 @@ export default {
 }
 
 #icon-dropdown{
-    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/MetaInput.vue

@@ -353,7 +353,6 @@ export default {
     background: #00000033;
     backdrop-filter: blur(5px);
     z-index: 10;
-    //display: none;
 }
 
 .img-index{

resources/js/components/RemixIconPicker.vue

@@ -2695,7 +2695,6 @@ export default {
 }
 
 #icon-dropdown{
-    //display: block;
     min-height: 45px;
     padding-right: 2rem;
     padding-left: 2rem;

resources/js/components/vueDateRangePicker.vue

@@ -943,7 +943,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueDateTimePicker.vue

@@ -918,7 +918,6 @@ export default {
 
 #dp-modal {
     position: fixed;
-//display: none; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: #00000033; backdrop-filter: blur(4px);
 }
 
 #picker {

resources/js/components/vueJalaliCalendar.vue

@@ -23,6 +23,8 @@
                 </div>
             </div>
             <table id="vue-cal-table">
+                <thead>
+
                 <tr>
                     <th @click="selectByWeekDay(0)">
                         {{ __("Saturday") }}
@@ -46,6 +48,10 @@
                         {{ __("Friday") }}
                     </th>
                 </tr>
+                </thead>
+                <tbody>
+
+
                 <tr v-for="(tr,i) in monthArray">
                     <td v-for="(td,j) in tr" @mouseenter="hover" @click="selecting(td)" :class="getClass(td)" :title="td.date+' '+td.pDate"
                         :data-timpstamp="td.unixTimeStamp">
@@ -55,6 +61,7 @@
                         </template>
                     </td>
                 </tr>
+                </tbody>
             </table>
             <input type="hidden" :value="JSON.stringify(selected)" :name="inputName">
         </div>

resources/sass/app.scss

@@ -1,9 +1,18 @@
+@use "sass:color";
 // Fonts
-@import 'vazirmatn/Vazirmatn-font-face.css';
-@import "remixicon/fonts/remixicon.css";
-@import "vue-toast-notification/dist/theme-bootstrap.css";
+@use 'vazirmatn/Vazirmatn-font-face.css';
+@use "remixicon/fonts/remixicon.css";
+@use "vue-toast-notification/dist/theme-bootstrap.css";
 // Variables
-@import 'panel/variables';
+@use 'panel/variables';
+
+@use "panel/common";
+@use "panel/raw";
+@use "panel/fix";
+@use "panel/navbar";
+@use "panel/breadcrumbs";
+@use "panel/item-list";
+@use "panel/steps";
 
 // Bootstrap
 //@import 'bootstrap/scss/bootstrap';
@@ -53,7 +62,7 @@ a{
 
     >aside{
         background-image: url("../images/pattern.png");
-        background-color: lighten($body-bg,7);
+        background-color: color.adjust(variables.$body-bg, $lightness: 7%);
         position: relative;
     }
     &.sided{
@@ -65,10 +74,3 @@ a{
 }
 
 
-@import "panel/common";
-@import "panel/raw";
-@import "panel/fix";
-@import "panel/navbar";
-@import "panel/breadcrumbs";
-@import "panel/item-list";
-@import "panel/steps";

resources/sass/client-custom/.gitignore

@@ -0,0 +1 @@
+_app_variables.scss

resources/sass/client-custom/_app_variables.scss

@@ -0,0 +1,19 @@
+$xshop-background:#eeeeee;
+$xshop-primary:#03b2b5;
+$xshop-diff:#ffffff;
+$xshop-diff2:#ffffff;
+$xshop-secondary:#0064c2;
+$xshop-text:#111111;
+$xshop-border-radius:7px;
+$xshop-shadow:2px 2px 4px #777777;
+:root{
+--xshop-background:#eeeeee;
+--xshop-primary:#03b2b5;
+--xshop-diff:#ffffff;
+--xshop-diff2:#ffffff;
+--xshop-secondary:#0064c2;
+--xshop-text:#111111;
+--xshop-border-radius:7px;
+--xshop-shadow:2px 2px 4px #777777;
+}
+

resources/sass/client-custom/_assetsNode.scss

@@ -1,5 +1,5 @@
-@import "remixicon/fonts/remixicon.css";
-@import "tiny-slider/dist/tiny-slider.css";
-@import "vue-toast-notification/dist/theme-bootstrap.css";
-@import "vazir-xui/font-face.css";
-@import "vazirmatn/Vazirmatn-font-face.css";
+@use "remixicon/fonts/remixicon.css";
+@use "tiny-slider/dist/tiny-slider.css";
+@use "vue-toast-notification/dist/theme-bootstrap.css";
+@use "vazir-xui/font-face.css";
+@use "vazirmatn/Vazirmatn-font-face.css";

resources/sass/panel/_common.scss

@@ -1,12 +1,14 @@
+@use "sass:color";
+@use "variables";
 body {
-    background: $body-bg;
+    background: variables.$body-bg;
 }
 
 .circle-btn {
     width: 75px;
     height: 75px;
     border-radius: 50%;
-    background: $secondary-color-panel;
+    background: variables.$secondary-color-panel;
     backdrop-filter: blur(4px);
     border: 0;
     box-shadow: 0px 3px 5px #11111177, inset 0 0 0 0 darkred;
@@ -56,7 +58,7 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .general-form {
-    background: $lighter-color;
+    background: variables.$lighter-color;
     border-radius: 7px;
     margin-bottom: 4rem;
     position: relative;
@@ -155,11 +157,11 @@ a.btn, a.action-btn, a.circle-btn {
         color: white;
 
         &.active {
-            background: $primary-color-panel;
+            background: variables.$primary-color-panel;
         }
 
         &:hover {
-            background: rgba($primary-color-panel, .7);
+            background: rgba(variables.$primary-color-panel, .7);
         }
     }
 }
@@ -167,7 +169,7 @@ a.btn, a.action-btn, a.circle-btn {
 #setting-sections {
     section {
         display: none;
-        background: $lighter-color;
+        background: variables.$lighter-color;
         padding: 1rem;
 
         .setting-field {
@@ -206,10 +208,10 @@ a.btn, a.action-btn, a.circle-btn {
     height: 125px;
     text-align: center;
     display: block;
-    color: $text-muted;
+    color: variables.$text-muted;
 
     &:hover {
-        color: lighten($primary-color-panel, 10);
+        color:  color.adjust(variables.$primary-color-panel, $lightness: 7%);
     }
 
     i {
@@ -224,12 +226,12 @@ a.btn, a.action-btn, a.circle-btn {
 }
 
 .avatar-x64 {
-    background: $body-bg;
+    background: variables.$body-bg;
     width: 64px;
     height: 64px;
     border-radius: 50%;
     object-fit: cover;
-    border: 3px rgba($primary-color-panel, 127) solid;
+    border: 3px rgba(variables.$primary-color-panel, 127) solid;
 }
 
 .skewed-container {
@@ -253,7 +255,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: $secondary-color-panel;
+        color: variables.$secondary-color-panel;
     }
 
     .card-body {
@@ -275,7 +277,7 @@ a.btn, a.action-btn, a.circle-btn {
 
     .card-header {
         background: #ffffff22 !important;
-        color: $secondary-color-panel;
+        color: variables.$secondary-color-panel;
     }
 
     .card-body {
@@ -319,7 +321,7 @@ a.btn, a.action-btn, a.circle-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: lighten($primary-color-panel, 15);
+    color:  color.adjust(variables.$primary-color-panel, $lightness: 15%);
 
     .loader {
         position: relative;
@@ -554,7 +556,7 @@ a.btn, a.action-btn, a.circle-btn {
     bottom: -50vh;
     left: 1rem;
     right: 1rem;
-    background: $lighter-color;
+    background: variables.$lighter-color;
     height: 40vh;
     border-radius: 7px 7px 0 0;
     border: 1px solid #aaaaaa55;

resources/sass/panel/_fix.scss

@@ -1,3 +1,4 @@
+@use "variables";
 .form-control:focus,.form-check-input:focus{
     box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25);
 border-color: #bc86fe;
@@ -7,7 +8,7 @@ border-color: #bc86fe;
 
     .card{
         background-color: rgba(var(--bs-body-bg),.5);
-        background-image: url("../../images/pattern.png");
+        background-image: url("$resImage/pattern.png");
         backdrop-filter: blur(4px);
         box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
     }
@@ -15,7 +16,7 @@ border-color: #bc86fe;
 
 main{
     .card{
-        background-color: $lighter-color;
+        background-color: variables.$lighter-color;
         border: 0;
         .card-header{
             background: #00000011;

resources/sass/panel/_item-list.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+@use "variables";
 .item-list {
     overflow: hidden;
-    background: $lighter-color;
+    background: variables.$lighter-color;
     //margin: 0 1rem;
     border-radius: 4px;
 
@@ -74,7 +76,7 @@
                 border-radius: 3px;
             }
              input:checked + label{
-                background: lighten($primary-color-panel,10);
+                background: color.adjust(variables.$primary-color-panel, $lightness: 10%)
             }
             input{
                 display: none;

resources/sass/panel/_navbar.scss

@@ -1,3 +1,4 @@
+@use "variables";
 #panel-navbar {
     height: 100%;
     overflow-y: auto;
@@ -38,7 +39,7 @@
             color: white;
 
             &:hover {
-                color: $secondary-color-panel;
+                color: variables.$secondary-color-panel;
             }
         }
     }

resources/sass/panel/_steps.scss

@@ -1,3 +1,5 @@
+@use "variables";
+@use "sass:color";
 .steps {
 
 
@@ -25,14 +27,14 @@
         top: 50%;
         inset-inline-start: 0;
         inset-inline-end: calc(100% - var(--progress));
-        border-bottom: 1px solid lighten($primary-color-panel,20);
+        border-bottom: 1px solid color.adjust(variables.$primary-color-panel, $lightness: 20%);
         transition: all 0.3s ease-in-out;
     }
 
     li {
         position: relative;
         z-index: 2;
-        background: $lighter-color;
+        background: variables.$lighter-color;
         cursor: pointer;
         border: 1px solid #ccc;
         border-radius: 50%;
@@ -47,8 +49,8 @@
         }
 
         &.active {
-            border-color: lighten($primary-color-panel,20);
-            background-color: $primary-color-panel;
+            border-color: color.adjust(variables.$primary-color-panel, $lightness: 20%);
+            background-color: variables.$primary-color-panel;
         }
     }
 }
@@ -86,11 +88,11 @@
     justify-content: center;
 
     &:hover {
-        border-color: $primary-color-panel;
+        border-color: variables.$primary-color-panel;
     }
 }
 #upload-drag-drop.active {
-    border-color: $primary-color-panel;
+    border-color: variables.$primary-color-panel;
 }
 
 .img-preview{
@@ -105,7 +107,7 @@
 
 
 .indexed{
-    background: $primary-color-panel;
+    background: variables.$primary-color-panel;
 }
 
 #upload-image-select{

resources/views/segments/clips_page/ClipListGrid/ClipListGrid.scss

@@ -1,3 +1,5 @@
+@use "../../../../sass/client-custom/app_variables";
+
 .ClipListGrid {
     .container,.container-fluid{
         overflow: hidden;
@@ -33,7 +35,7 @@
             display: flex;
             position: absolute;
             z-index: 2;
-            background: rgba($xshop-diff, .7);
+            background: rgba(app_variables.$xshop-diff, .7);
             padding: 7px;
             bottom: 0;
             left: 0;

resources/views/segments/products/PedramProducts/PedramProducts.scss

@@ -19,11 +19,6 @@
 
     svg:last-child {
         width: calc(100%);
-        //height: 171px;
-        //transform: rotateY(180deg) ;
-        //display: block;
-        //left: 50%;
-        //position: relative;
     }
 
     h1 {

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
 
 export default defineConfig({
     plugins: [
@@ -25,6 +26,36 @@ export default defineConfig({
     resolve: {
         alias: {
             vue: 'vue/dist/vue.esm-bundler.js',
+            $resImage: resolve('./resources/images')
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler' // or "modern"
+            }
+        }
+    },
+    build: {
+        chunkSizeWarningLimit: 500, // adjust this value to your needs
+        rollupOptions: {
+            output: {
+                manualChunks: (id) => {
+                    if (id.includes('node_modules/tns')|| id.includes('node_modules/axios') || id.includes('node_modules/bootstrap')) {
+                        return 'vendor-tns-axios';
+                    } else if (id.includes('node_modules/@vue')  || id.includes('node_modules/vue') || id.includes('node_modules/vuex') || id.includes('node_modules/vue-toast-notification') ) {
+                        return 'vendor-vue';
+                    } else if (id.includes('node_modules/chart.js')) {
+                        return 'vendor-chart';
+                    } else if (id.includes('node_modules/three')) {
+                        return 'vendor-three';
+                    } else if (id.includes('node_modules')) {
+                        return 'vendor-others';
+                    }
+                    return 'app';
+                },
+
+            },
         },
     },
 });