Laravel 5 Laravel：优化组合/网页包

我是新来的网页包。我正在处理一个多页应用程序。我了解Laravel Mix的基本知识，但我不了解的是如何优化我的Laravel Mix和/或脚本，这样就不会占用16GB内存和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();
}

---

内存和cpu/时间方面的问题与构建过多有关。您没有将单页应用程序（SPA）框架用于它的优点，即SPA。既然您正在进行构建，为什么不将其全部构建到单个app.js中呢？然后，您可以使用以下内容动态加载每个组件：

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

若您的目的是优化每个页面上单个视图的负载，那个么您实际上是在白白做额外的工作。网页包已具有名为“代码拆分”的功能

参考：

阅读上面的整个页面，因为它非常有用，而不仅仅是异步组件部分

提示：因为LaravelMix只是一个网页包包装器，所以您可以在mix中配置网页包。例如，您可以将区块文件定义到特定位置，如下所示：

mix.webpackConfig({
输出：{
chunkFilename:'js/chunks/[name].js'，
},
});

您会注意到，当您执行动态/异步导入时，它只会导致特定javascript文件/块的异步/ajax加载