Laravel: Optimizing Mix/Webpack - laravel-5

Question

I am new to Webpack. I am working on a multi-page application. I understand the basics of Laravel Mix, but what I don't understand is how to optimize my Laravel Mix and/or scripts so that is doesn't take 16GB of memory and 20+ minutes to run. Any tips on how I can optimize my webpack file would be greatly appreciated. I have attached it below.
Note: app.js contains all my global stuff
/* 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

The problem you're having with memory and cpu/time is relating to doing too much build. You're not utilizing Single Page Application (SPA) framework for what it's good as, an SPA. Since you're doing a build anyway, why don't you build it all into a single app.js? Then you can dynamically load each component with something like:
<component :is="component_name"></component>
If your purpose is to optimize load of a single view on each page then you're actually doing extra work for nothing. Webpack already have a feature called 'codesplitting' https://webpack.js.org/guides/code-splitting/
Ref: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
Read the entire page above as it is all helpful, not just the Async Component part.
Tip: Since laravel-mix is simply a Webpack wrapper, you can configure webpack inside of mix. Example, you can define the chunk file to specific location like so:
mix.webpackConfig({ output: { chunkFilename: 'js/chunks/[name].js', }, });
You will notice, when you do dynamic/async import, it will simply cause an async/ajax load of the specific javascript file/chunk.