web-dev-qa-db-fra.com

webpack 4 - plugin split chunks pour plusieurs entrées

Utilisation de split chunks plugin avec la configuration suivante:

{
    entry: {
        entry1: [entry1.js],
        entry2: [entry2.js],
        entry3: [entry3.js],
        ...
    }
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    } 
}

Le code serait parfaitement divisé en:

vendors-entry1-entry2-entry3.js // common for all
vendors-entry1-entry3.js // vendors only required by both entry1, entry3
entry1-entry2.js // common code of entry1 and entry2
entry1.js // unique entry's code
entry2.js
entry3.js

La question est: comment puis-je utiliser les fournisseurs spécifiques par entrée dans mon code HTML (ou ejs dans mon cas spécifique)?

Utiliser HtmlWebpackPlugin tel que recommandé créerait simplement un index.html qui chargerait tout ce qui précède, bien que le cas d'utilisation soit clairement:

Lors du rendu de la page entry1, chargez:

vendors-entry1-entry2-entry3.js
vendors-entry1-entry3.js
entry1-entry2.js
entry1.js

Lors du rendu de la page entry2, chargez:

vendors-entry1-entry2-entry3.js
entry1-entry2.js
entry2.js

etc..

javascriptwebpackbundlecode-splitting
13
Daniel

La version 4 de HtmlWebpackPlugin (qui est alpha à partir de maintenant) inclut automatiquement les morceaux générés dans l'entrée. Donc, définir chunks: 'entry1' devrait fonctionner:

new HtmlWebpackPlugin({
    template: 'entry1.ejs',
    filename: 'entry1.html',
    chunks: ['entry1']
}),

... et conduit à l'injection de tous les morceaux dépendants dans un fichier HTML:

<script src="/vendors-entry1-entry2-entry3.js">
<script src="/vendors-entry1-entry3.js">
<script src="/entry1-entry2.js">
<script src="/entry1.js">

Vous pouvez l'installer avec

npm install --save-dev html-webpack-plugin@next
5
ghost28147

J'ai un problème similaire et j'ai eu quelques succès mineurs en utilisant une configuration que j'ai trouvée ici . Je ne sais pas si cela s'appliquera à votre cas d'utilisation spécifique, mais je pensais partager.

Le hachage d'optimisation dans la configuration webpack ressemble à ceci:

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2,
                    minSize: 0
                }
            }
        },
        occurrenceOrder: true
    },

Donc, en utilisant ces points d'entrée:

    entry: {
        app: './src/app.js',
        home: './src/home.js',
        product: './src/product.js'
    }

Et ceci en tant que configuration HtmlWebpackPlugin:

    // base template common to all pages
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/base.html.j2',
        filename: `${templates}/base.html.j2`,
        chunks: ['commons', 'app']
    }),

    // JUST the homepage
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/index.html.j2',
        filename: `${templates}/index.html.j2`,
        chunks: ['home']
    }),

    // JUST the product template
    new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './src/jinja-templates/product.html.j2',
        filename: `${templates}/product.html.j2`,
        chunks: ['product']
    }),

Les morceaux "commons" et "app" ont été ajoutés à toutes les pages. Le morceau "home" (uniquement) a été ajouté à la page d'accueil. Voici un exemple de la source de la page "home":

    <body>
        ...
        <script type="text/javascript" src="/static/commons.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/app.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
        <script type="text/javascript" src="/static/home.7ca91fd78182a8eb23f6.js?7ca91fd78182a8eb23f6"></script>
    </body>

Je ne sais pas si/comment les modules des fournisseurs peuvent être séparés en utilisant cette configuration. Je suppose que c'est possible, mais si c'est le cas, une cabale secrète d'élites de webpack garde cette information bien gardée: P

Mais étant donné que le code est déjà divisé en plusieurs très petits morceaux, je ne suis pas sûr que ce soit nécessaire (pour moi, en tout cas).

0
tarponjargon