web-dev-qa-db-ja.com

webpack 4-複数のエントリの分割チャンクプラグイン

split chunks plugin を次の設定で使用：

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

コードは次のように完全に分割されます。

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

質問は、HTMLのエントリごとに特定のベンダーをどのように使用するのですか（または特定のケースではejs）？

推奨される HtmlWebpackPlugin を使用すると、上記のすべてをロードするindex.htmlが作成されますが、ユースケースは明確です。

entry1ページをレンダリングする場合-ロード：

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

entry2ページのレンダリング時-ロード：

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

等..

javascriptwebpackbundlecode-splitting
17
Daniel

HtmlWebpackPluginのバージョン4（現在はアルファ版）には、生成されたすべてのエントリのチャンクが自動的に含まれます。したがって、chunks: 'entry1'動作するはずです：

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

...そして、htmlファイルにすべての依存チャンクを挿入します。

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

でインストールできます

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

私は同様の問題を抱えており、私が見つけた設定セットアップを使用していくつかのマイナーな成功を収めました here 。特定のユースケースに適用されるかどうかはわかりませんが、共有したいと思いました。

Webpack configの最適化ハッシュは次のようになります。

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

これらのエントリポイントを使用して：

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

そして、これは私の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']
    }),

「commons」チャンクと「app」チャンクをすべてのページに追加し、ホームページに「home」チャンク（のみ）を追加し、製品ページに「product」チャンク（のみ）を追加しました。 「ホーム」ページのソースの例を次に示します。

    <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>

この設定を使用してベンダーモジュールを分割できるかどうか/どのように分割できるかはわかりません。可能だと思いますが、もしそうなら、webpackエリートの秘密の秘密がこの情報をしっかり守っています：P

しかし、すでにコードがいくつかの非常に小さなチャンクに分割されていることを考えると、それが必要かどうかはわかりません（とにかく）。

0
tarponjargon