Besoin d'aide ?

Laravel Vue.js chunck files

Avatar de MourareauMathieu
MourareauMathieu

J'utilise Vue sur mon projet laravel et j'ai une multitude de fichiers js qui s'accumule dans mon rep public. quand je tente de déployé en prod. j'ai cette exception js :

Loading chunk 36 failed.

comment faire pour avoir uniquement le app.js ? je ne comprends pas trop si quelqu'un pouvais m'éclérer :)

merci d'avance

Posté il y a 2 mois
Avatar de bestmomo
bestmomo

Salut,

Utilise mix.

Posté il y a 2 mois
Avatar de MourareauMathieu
MourareauMathieu

Salut Momo :)

voici mon webpack actuel, j'ai déjà mix il me semble

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

/* Laravel Mix Alias (allows to use vue-cli style paths in components `@/` */
require('laravel-mix-alias');

/*
 |--------------------------------------------------------------------------
 | 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
    .alias({
        '@': '/resources/js',
        '@/components': '/resources/js/components',
    })
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .styles([
        'node_modules/@mdi/font/css/materialdesignicons.css',
    ], 'public/css/vendor.css')
    .copyDirectory('node_modules/@mdi/font/fonts', 'public/fonts')
    .copyDirectory('resources/images', 'public/images')
    .version();
Posté il y a 2 mois
Avatar de bestmomo
bestmomo

Oui mais tous tes fichiers Javascript qui s'accumulent comme tu le dis, je suppose qu'ils sont indépendants et ne sont pas reliés comme modules ou dépendances à app.js. Il ne sont donc pas trouvés par Webpack.

Posté il y a 2 mois
Avatar de MourareauMathieu
MourareauMathieu

d'accord du coup qu'elles sont les modifications que je dois apporter au webpack ?

Posté il y a 2 mois
Avatar de bestmomo
bestmomo

Tout dépend de la dimension de tes fichiers et de la portée de ton Javascript. En général on a ces cas :

  • du script qui concerne juste une page : dans ce cas le plus simple est de le mettre directement sur la page s'il est pas trop volumineux, sinon tu le sépare et le minifies avec Webpack
  • du script qui concerne plusieurs pages : là tu le sépares forcément et tu le minifies avec Webpack
  • plusieurs scripts qui concernent plusieurs pages de façon croisée, là autant tout entasser dans un fichier séparé dans ce genre en faisant attention de pas surcharger des définitions :
mix.scripts([
    'public/js/script1.js',
    'public/js/script2.js',
    'public/js/script3.js'
], 'public/js/script-globale.js');
  • du script organisé en modules, là pas de soucis puisqu'on a un script d'entrée pour Webpack et il peut facilement trouver tout le reste

Voilà en gros les approches...

Posté il y a 2 mois
Avatar de MourareauMathieu
MourareauMathieu

c'est une application SPA une donc une multitude de vue j'ai juste une view blade avec ma balise div comme point d'entré.

Pour le deploiement en PROD pour ne pas commit les chunck files je peux faire un :

npm install npm run prod qui me génére les chunck files

Ou dois-je commit les chunck files sur le repo ?

C'est assez vague pour moi cette histoire de mix et de déploiement

Posté il y a 2 mois

Vous ne pouvez pas répondre à ce sujet.