0

tengo un proyecto con laravel y tengo configurado el siguiente fichero para webpack, pero luego en mi template uso un archivo "head.blade.php" donde cargo todos los vendors, uso jquery, boostrap, moment...etc

Cuando subo esto y paso alguna prueba de rendimiento en google page speed o en otros servicios me dice que tengo más de 20 JS que los comprima, y no se como hacerlo.

Fichero webpack.mix.js

const mix = require('laravel-mix');

mix.scripts([
    'resources/js/app.js',
    'resources/js/bootstrap.js'
], 'public/js/app.js').extract([
], 'public/js/vendors.js').version();

mix.scripts([
    'resources/js/cars.js',
], 'public/js/cars.js').extract([
], 'public/js/vendors.js').version();

mix.scripts([
    'resources/js/customers.js',
], 'public/js/customers.js').extract([
], 'public/js/vendors.js').version();

mix.js('resources/js/bootstrap-table-es-ES.js', 'public/js');

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

Head.blade.php

<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<meta content="" name="descriptison">
<meta content="" name="keywords">


<!-- Vendor CSS Files -->
<link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/icofont/icofont.min.css')  }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/boxicons/css/boxicons.min.css')  }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/remixicon/remixicon.css')  }}" rel="stylesheet">
<link href="{{ asset('assets/vendor/venobox/venobox.css')  }}" rel="stylesheet">

<!-- Template Main CSS File -->
<link href="{{ asset('assets/css/style.css')  }}" rel="stylesheet">

{{--JQUERY--}}
<script src="{{ asset('assets/vendor/jquery/jquery-3.5.1.min.js') }}"></script>

{{--BOOTSTRAP-TABLES--}}
<link rel="stylesheet" href="{{ asset('assets/vendor/boostrap-tables/bootstrap-table.min.css')  }}">
<script src="{{ asset('assets/vendor/boostrap-tables/bootstrap-table.min.js')  }}"></script>
<script src="{{ asset('assets/vendor/boostrap-tables/bootstrap-table-es-ES.min.js')  }}"></script>

<script src="{{ asset('assets/vendor/popper/popper.min.js')  }}"></script>
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.min.js')  }}"></script>
<script src="{{ mix('/js/bootstrap-table-es-ES.js') }}"></script>


<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ asset('assets/vendor/moment/moment.min.js') }}"></script>

<script src="{{ mix('/js/app.js') }}"></script>
<script src="{{ mix('/js/diets.js') }}"></script>
<script src="{{ mix('/js/routines.js') }}"></script>

Gracias,

1 respuesta 1

1

El problema es que estas usando incorrectamente la lógica de Laravel Mix. Referencia de documentación: https://laravel.com/docs/8.x/mix#running-mix

Dentro de tu carpeta de proyecto ejecuta lo siguiente:

npm install

Después para ejecutar el mix

// Ejecuta todas las tareas de mix...
npm run dev

// Ejecuta todas las tareas y las minifica...
npm run production

El "MIX" sirve para compliar todos los archivos de JS y de CSS en un solo documento que luego referenciarás en tu documento usando el ayudante "asset". Ej:

<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

<!-- Scripts -->
<script src="{{ asset('js/scripts.js')}}"></script>

Después de compilar, Laravel Mix coloca esos archivos en tu carpeta public de forma automática para que puedas acceder facilmente usando los helpers.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.