时间戳

首页 > 解决方案 > Laravel：优化 Mix/Webpack

laravel-5 - Laravel：优化 Mix/Webpack

问题描述

我是 Webpack 的新手。我正在开发一个多页应用程序。我了解 Laravel Mix 的基础知识，但我不了解的是如何优化我的 Laravel Mix 和/或脚本，这样就不需要16GB 的内存和 20 多分钟的运行时间。任何关于如何优化我的 webpack 文件的提示将不胜感激。我已经附在下面了。

注意：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();
}

标签： laravel-5webpacklaravel-mix

解决方案

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

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

如果您的目的是优化每个页面上单个视图的负载，那么您实际上是在白白做额外的工作。Webpack 已经有一个名为“codesplitting”的功能https://webpack.js.org/guides/code-splitting/

参考：https ://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

阅读上面的整个页面，因为它很有帮助，而不仅仅是异步组件部分。

提示：由于 laravel-mix 只是一个 Webpack 包装器，你可以在 mix 中配置 webpack。例如，您可以将块文件定义到特定位置，如下所示：

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

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

推荐阅读