@ADamCarraway

Как должен выглядеть нормальный app.js файл?

Прошу указать на ошибки новичка.
При выполнении npm run build ругается на то что app.js весит 2мб. Я понимаю что это не очень хорошо.
Я понимаю что я туда много всего наимпортировал, ниже будет он сам.
Подскажите как должен выглядеть адекватный app.js, куда импортировать стили сайта или отдельных плагинов?
Laravel+Inertiajs
import '../css/app.css'
import '../css/ui.css'
import '../css/includes.css'
import '../css/live.css'
import '../css/settings.css'
import '../css/editor.css'
import '../css/subsideCoverEditor.css'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'

import {createApp, h} from 'vue'
import {createInertiaApp, Link, Head} from '@inertiajs/vue3'

import VueClipboard from 'vue-clipboard2'
import Layout from './Shared/Layout.vue'
import InfiniteLoading from "v3-infinite-loading";
import vueClickOutsideElement from 'vue-click-outside-element'
import ResizeTextarea from 'resize-textarea-vue3'

import ElementPlus from 'element-plus'
import { i18nVue } from 'laravel-vue-i18n'
import moment from 'moment'
import 'moment/dist/locale/ru';
import 'moment/dist/locale/en-gb';
moment.locale(import.meta.env.VITE_APP_LOCALE)

import mitt from 'mitt';

const emitter = mitt();
export default emitter;

VueClipboard.config.autoSetContainer = true // add this line

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        let page = pages[`./Pages/${name}.vue`]
        page.default.layout = page.default.layout || Layout
        return page
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(i18nVue, {
                resolve: (lang) => import(`../lang/${lang}.json`)
            })
            .use(plugin)
            .use(ElementPlus)
            .use(VueClipboard)
            .use(vueClickOutsideElement)
            .use(ResizeTextarea)
            .use(moment)
            .component('infinite-loading', InfiniteLoading)
            .component('Link', Link)
            .component('Head', Head)
            .mount(el)
    },

    title: title => title,

    progress: {
        color: '#29d',
        showSpinner: false,
    },
})

import axios from 'axios'

// Response interceptor
axios.interceptors.response.use(response => response, error => {
    let status = error.response?.status

    if (status === 401) {
        emitter.emit('loginModal', true);
    }

    return Promise.reject(error)
})
  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы