web-dev-qa-db-ja.com

大規模Webアプリケーション用のWebpackおよびLazy Load

バックグラウンド

私はWebpackとJavaScriptで開発しようとしています。 Webpackはすべてのソースコードを1つのファイルにバンドルします。アプリケーションが大きくなると、ファイルが非常に大きくなり、パフォーマンスに悪影響を及ぼします。

Webpack

Webpackは、バンドル出力を事前定義されたエントリポイントに従って異なるものに分割するコード分割という名前の機能を提供しました。アプリケーションが大きくなりすぎた場合に、パフォーマンスを向上させるのに役立ちます。ただし、アプリケーションを再構築してアプリケーションを深く理解する必要があり、その後、アプリケーションはビルドのエントリポイントとなるさまざまなモジュールに分割されました。また、遅延読み込みで別の関数を呼び出す必要がある場合は、コードを変更する必要があります。

SystemJs

SystemJsは、ランタイムに必要なモジュールを遅延ロードする動的Esモジュールローダーです。

質問

大量販売アプリケーションにはwebpackを使用する必要がありますか？

可能な解決策

大規模なアプリケーションにはJavaScriptソースコードのバンドルが必要ですが、アプリケーションがサブモジュールに分割され、サブモジュールが読み込まれると、アプリケーションに遅延読み込みされる可能性があります。

更新

ステージ3の提案特定の動的インポート構文を使用して問題を解決しました（特定の部分の遅延ロード）。

import('./test.js').then(function(Test){
  var test = new Test.default();
  test.doSomething()
})

に似ています

import Test from './test';
var test = new Test();
test.doSomething();

Webpackサポート

パブリックパス、chunkFilenameを構成し、新しい構文を有効にするためにsyntax-dynamic-importを追加する必要がありました（import（））。

const path = require('path');

module.exports = {
    entry: {
        app:    './src/app.js'
    },
    output: {
        publicPath: 'bin/',
        path: path.resolve(__dirname, 'bin'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015'],
                            plugins: ["syntax-dynamic-import"]
                        }
                    }
                ]               
            }
        ]
    }
};
javascriptperformancebuildslazy-initializationwebpack
4
Ben Cheng

WebpackからRequireJS、さらにSystemJSまでのすべての成熟したJavaScriptロードおよびバンドルツールは、これを行うための手法を提供します。

Webpackでは、code splittingと呼ばれる機能によって有効になります。

SystemJSでは、バンドル算術、depキャッシング、バンドルインジェクションなどの機能によって有効になり、JSPMまたはSystemJS Builderの直接使用によって提供されます。

RequireJSの用語を忘れてしまいましたが、機能もそこに存在し、r.jsによって提供されています。

だから、ただ研究しなさい。

ただし、直接的な質問に答えるために、Webpackを含むこれらのツールはすべて、大規模なアプリケーションの開発に適しています。実際、彼らはそれに優れています。私の個人的な好みはWebpackではなく、JSPMです​​。

Ben Chengが指摘するように、Webpackのコード分割アプローチでは、アプリケーションをさまざまなエントリポイントの観点から構造化する必要があります。これは、道徳的にサブパッケージまたはサブアプリと考えることができます。とはいえ、この構造化手法は、これらすべてのツールのバンドルを分割する役割を果たします。

アプリケーションをこれらのより独立したユニットに分解することは難しい作業です。

免責事項：私はJSPMチームのメンバーです

3
Aluan Haddad