web-dev-qa-db-fra.com

Comment diviser les fichiers js en morceaux dans vue cli 3 avec l'objet performance webpack?

J'ai réalisé un projet avec vue cli v3. Après la construction du projet, j’ai vu deux avertissements:.

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).

This can impact web performance.

Assets:

  js/chunk-vendors.2557157d.js (474 KiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:

  app (617 KiB)

      js/chunk-vendors.2557157d.js

      css/app.821fcb13.css

      js/app.b5a47a94.js

Maintenant, lors de l'inspection, j'ai vu que si j'ajoute ce qui suit dans la configuration de webpack

performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
}

alors il se cassera automatiquement les dossiers de js en petits morceaux. Maintenant, dans la vue 3, il n'y a pas de fichier webpack.config.

Donc, si vous pouvez guider comment implémenter ceci afin que les fichiers soient automatiquement chunkés quand ils dépassent certaines limites, ce sera vraiment utile.

C'est là que je l'ai vu: https://github.com/webpack/webpack/issues/3486#issuecomment-397915908

Dans l'attente de votre réponse.

P.S .: J'ai lu this et essayé de créer le fichier vue.config.js et d’ajouter ce qui suit dans le fichier

module.exports = {
  configureWebpack: {
    performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
    }
  }
}

Mais ça n'a rien fait. Quelqu'un peut-il s'il vous plaît aider à me faire savoir que dois-je faire pour m'assurer que mes morceaux de fichier js ne traversent pas la taille recommandée en vue? 

Mettre à jour

Selon la réponse de Linus Borg, j'ai essayé de mettre les deux codes suivants dans le fichier vue.config.js. Essayez 1: 

module.exports = {
  configureWebpack: {
    splitChunks: {
            minSize: 10000,
            maxSize: 250000,
        }
  }
}

et Essayez 2: 

module.exports = {
  configureWebpack: {
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
  }
}

Après les deux alors quand j'ai construit mon projet pour la production. J'ai vu le même avertissement, sans changer aucune taille: https://i.imgur.com/7Hp7SXC.jpg .__ Il semble qu'aucun d'entre eux n'affecte de changement. De l'aide? 

webpackvue.jsvue-cli
2
iSaumya

Ce qui suit a été ajouté à mon fichier vue.config.js . C'est ce qui a finalement été mis en bloc par tous mes actifs fournisseurs lors de l'exécution de npm run build pour mon projet @ vue/cli (version 3.0.4).

module.exports = {
  configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}

Masquer les avertissements

module.exports = {
  configureWebpack:{
    performance: {
      hints: false
    },
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }
}
2
tbonz

Vous avez mal compris les paramètres que vous avez modifiés, probablement parce que vous avez mal interprété le commentaire publié que vous avez associé.

Ce sont des limites pas qui indiquent à webpack comment/quand diviser un morceau, elles ne définissent que les limites au-dessus desquelles l'avertissement est affiché dans la console, c'est tout.

Ce que vous voulez vraiment, c'est modifier les paramètres de splitChunks . Malheureusement, cette option peut être assez compliquée à configurer pour un débutant. Je vous recommande donc cet article de mieux comprendre son fonctionnement.

Cependant, cet article ne couvre pas le fait que dans les versions récentes, un nouveau option expérimentale a été ajouté à splitChunks: maxSize.

Cela devrait fonctionner quelque chose comme ceci:

configureWebpack:{
  splitChunks: {
    minSize: 10000,
    maxSize: 250000,
  }
}

N'oubliez pas que c'est expérimental. Le moyen le plus fiable serait donc de configurer des splitchunks pour créer des morceaux ne dépassant pas votre taille limite en plaçant manuellement différentes dépendances en différents morceaux avec splitChunks.cacheGroups.

2
Linus Borg

ceci est mon fichier de configuration, et cela fonctionne dans mon projet, merci de l'essayer.

module.exports = {
    configureWebpack: {
        performance: {
            hints: "warning", // enum
            maxAssetSize: 1048576, // int (in bytes),
            maxEntrypointSize: 1048576, // int (in bytes)
        }
    }
}
0
MuteG