Laravel: Оптимизация Mix / Webpack

Question

Я новичок в Webpack. Я работаю над многостраничным приложением. Я понимаю основы Laravel Mix, но я не понимаю, как оптимизировать мой Laravel Mix и / или сценарии, чтобы он не занимал 16 ГБ памяти и 20+ минут для запуска. Любые советы о том, как я могу оптимизировать мой файл веб-пакета, будет принята с благодарностью. Я приложил это ниже.

Примечание: app.js содержит все мои глобальные вещи

/* global require */

const { mix } = require('laravel-mix');
const webpack = require('webpack');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.webpackConfig({
    resolve: {
        alias:{
            "datatables": "mdbootstrap-pro/js/addons/datatables.min.js",
            "mdbootstrap": "mdbootstrap-pro"
        }
    },   
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            Blazy: "blazy",
            Flickity: "flickity",
            jQuery: "jquery",            
            Popper: ["popper.js", "default"],
            Vue: ["vue/dist/vue.esm.js", "default"],
            Waves: "node-waves",
            "window.jQuery": "jquery",
            WOW: "wow.js"
        })
    ],
    profile: true,
    stats: {
        hash: true,
        version: true,
        timings: true,
        assets: true,
        chunks: true,
        modules: true,
        reasons: true,
        children: true,
        source: false,
        errors: true,
        errorDetails: true,
        warnings: true,
        publicPath: true
    }
});

mix.copy('node_modules/font-awesome/fonts', 'public/fonts/vendor/font-awesome') // Font Awesome
.copy('node_modules/mdbootstrap-pro/css/addons', 'public/css/addons') // DataTables
.copy('resources/fonts', 'public/fonts') 

// Service Worker
.js(['resources/js/service-worker.js'], 'service-worker.js')

// Home Page
.styles(['resources/css/vendor/flickity/flickity.css', 'resources/css/views/index.css'], 'public/css/views/index.css')
.js(['resources/js/app.js', 'resources/js/views/index.js'], 'public/js/views/index.js')

.js(['resources/js/app.js', 'resources/js/views/about.js'], 'public/js/views/about.js') // About
.js(['resources/js/app.js', 'resources/js/views/blogs/index.js'], 'public/js/views/blogs/index.js') // Blogs
.js(['resources/js/app.js', 'resources/js/views/blogs/show.js'], 'public/js/views/blogs/show.js') // Blogs

// Accounts
.js(['resources/js/app.js', 'resources/js/views/accounts/index.js'], 'public/js/views/accounts/index.js') // Accounts
.js(['resources/js/app.js', 'resources/js/views/accounts/cd.js'], 'public/js/views/accounts/cd.js') // CD
.js(['resources/js/app.js', 'resources/js/views/accounts/checking.js'], 'public/js/views/accounts/checking.js') // Checking
.js(['resources/js/app.js', 'resources/js/views/accounts/money-market.js'], 'public/js/views/accounts/money-market.js') // Money Markets
.js(['resources/js/app.js', 'resources/js/views/accounts/saving.js'], 'public/js/views/accounts/saving.js') // Savings

// Benefits
.js(['resources/js/app.js', 'resources/js/views/benefits/index.js'], 'public/js/views/benefits/index.js') // Benefits
.js(['resources/js/app.js', 'resources/js/views/benefits/investments.js'], 'public/js/views/benefits/investments.js') // Investments
.js(['resources/js/app.js', 'resources/js/views/benefits/merchant-partner-program.js'], 'public/js/views/benefits/merchant-partner-program.js') // Merchant Partner Program
.js(['resources/js/app.js', 'resources/js/views/benefits/mobile-services.js'], 'public/js/views/benefits/mobile-services.js') // Mobile Services
.js(['resources/js/app.js', 'resources/js/views/benefits/online-services.js'], 'public/js/views/benefits/online-services.js') // Online Services

// Business Accounts
.js(['resources/js/app.js', 'resources/js/views/business/index.js'], 'public/js/views/business/index.js') // Business Accounts
.js(['resources/js/app.js', 'resources/js/views/business/cd.js'], 'public/js/views/business/cd.js') // CD
.js(['resources/js/app.js', 'resources/js/views/business/checking.js'], 'public/js/views/business/checking.js') // Checking
.js(['resources/js/app.js', 'resources/js/views/business/credit.js'], 'public/js/views/business/credit.js') // Credit
.js(['resources/js/app.js', 'resources/js/views/business/debit.js'], 'public/js/views/business/debit.js') // Debit
.js(['resources/js/app.js', 'resources/js/views/business/loan.js'], 'public/js/views/business/loan.js') // Loans
.js(['resources/js/app.js', 'resources/js/views/business/money-market.js'], 'public/js/views/business/money-market.js') // Money Markets

// Cards
.js(['resources/js/app.js', 'resources/js/views/cards/credit.js'], 'public/js/views/cards/credit.js') // Credit
.js(['resources/js/app.js', 'resources/js/views/cards/debit.js'], 'public/js/views/cards/debit.js') // Debit
.js(['resources/js/app.js', 'resources/js/views/cards/index.js'], 'public/js/views/cards/index.js') // Cards
.js(['resources/js/app.js', 'resources/js/views/cards/reloadable.js'], 'public/js/views/cards/reloadable.js') // Reloadable

// Careers
.js(['resources/js/app.js', 'resources/js/views/careers/index.js'], 'public/js/views/careers/index.js') // Careers

// Loans
.js(['resources/js/app.js', 'resources/js/views/loans/auto.js'], 'public/js/views/loans/auto.js') // Auto
.js(['resources/js/app.js', 'resources/js/views/loans/home.js'], 'public/js/views/loans/home.js') // Home
.js(['resources/js/app.js', 'resources/js/views/loans/home-equity.js'], 'public/js/views/loans/home-equity.js') // Home Equity
.js(['resources/js/app.js', 'resources/js/views/loans/index.js'], 'public/js/views/loans/index.js') // Loans

.js(['resources/js/app.js', 'resources/js/views/alerts/index.js'], 'js/views/alerts/index.js') // Alerts

.sass('resources/sass/app.scss', 'public/css/app.css');

if (mix.inProduction()) {
    mix.version();
} else {
    mix.sourceMaps();
}

Answer 1

Проблема с памятью и процессором / временем связана с выполнением слишком большого количества сборок. Вы не используете инфраструктуру одностраничных приложений (SPA) для того, что хорошо, как SPA. Так как вы все равно делаете сборку, почему бы вам не собрать все это в один app.js? Затем вы можете динамически загружать каждый компонент с помощью чего-то вроде:

<component :is="component_name"></component>

Если ваша цель состоит в том, чтобы оптимизировать загрузку одного представления на каждой странице, то вы фактически делаете лишнюю работу даром. В веб-пакете уже есть функция, называемая «кодирование» https://webpack.js.org/guides/code-splitting/

Ссылка: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

Прочитайте всю страницу выше, так как она полезна, а не только часть компонента Async.

Подсказка: поскольку laravel-mix - это просто оболочка для веб-пакетов, вы можете настроить веб-пакет внутри смеси. Например, вы можете определить файл чанка для определенного места следующим образом:

mix.webpackConfig({ output: { chunkFilename: 'js/chunks/[name].js', }, });

Вы заметите, что когда вы выполняете динамический / асинхронный импорт, это просто вызывает асинхронную / ajax-загрузку конкретного файла / чанка javascript.