0

ユーザーがサイトを閲覧するときに、モデルを遅延ロードするために、既存のノックアウト ベースの SPA フレームワークで webpack を使用することを検討しています。

私は以下のスレッドを見ていた Webpackで個々のSPAバンドルを作成する

受け入れられた答えは、私が達成しようとしているものと非常に似ているように見えました。基本的に、各 SPA ページは、サーバーから JSON 形式で返されるコンポーネントのコレクションで構成されます。

クライアントは、これらのコンポーネントを個々の js モデルにマップします。現在、これらの js モデルはすべて 1 つの大きなファイルにまとめられており、サイトが最初にレンダリングされるときにクライアントに提供されます。

これらのコンポーネントを (require および require.ensure を介して) チャンクに分割し、webpack を使用してオンデマンドでロードされるようにしたいと考えています。

そのため、上記のスレッドから提案されたソリューションをいじってみましたが、うまくいきました。また、webpack.config.js にルート ディレクティブを追加しました。

    var webpack = require('webpack'),
    path = require('path');

var commonsPlugin =
    new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    devtool1: 'eval-source-map',
    entry: {
        app: './app'
    },
    output: {
        path: __dirname + "/build",
        filename: '[name]-bundle.js',
        publicPath: "/code_split/build/"
    },
    watchOptions: {
        poll: 2000
    },
    resolve: {
        root: [
            path.resolve('./models/components')
        ],
        extensions: ['', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    },
    plugins: [commonsPlugin]
}

相対パスを指定せずにモジュールを要求できるようにします (各モデルは models/components ディレクトリ内の js モジュールにあります)

今私が遭遇した問題は、すべてのrequireをswitchステートメントからPromiseを返す関数に抽出しようとしたことです。これは既存の実装でうまく機能します

だから代わりに

var mod = window.location.hash.split('/')[1].toLowerCase();
switch(mod) {
    case "contacts":
        require(["./pages/contacts"], function(page) {
            // do something with "page"
        });
        break;
    case "tasks":
        require(["./pages/tasks"], function(page) {
            // do something with "page"
        });
        break;
}

に変更しました

    function loadModule(mo){
        return new Promise(function(resolve){
            require([mo], function(module){
                resolve(module.default);
            });
        });
    }

switch(mod) {
        case "contacts":
            promise = loadModule("contacts");
            break;
        case "tasks":
            promise = loadModule("tasks");
            break;
    }

ただし、webpack を実行した後、上記は惨めに失敗します。処理するモジュールの数が驚くほど多くなり、多くの例外が吐き出されるため、無限ループに陥っているようです。これは loadModule 関数が原因であると確信しています。大丈夫

何か案は？ありがとう

4

1 に答える 1

1

Webpack は静的分析を使用して、バンドルするモジュール (およびそれらをバンドルする方法) を見つけます。要求を抽象化しているため、webpack は正確に何が必要かを理解できなくなります。物事が壊れるのを避けるために、それはあなたが意味する可能性のあるものすべてをバンドルしようとします. この場合、おそらく文字通り、プロジェクト ディレクトリで検出できるすべての JS ファイル (node_modules 内のすべての JS ファイルを含む) を意味します。

Webpack の非同期要求を約束したい場合は、非同期バンドルごとにコードを複製するだけで済みます。

于 2016-09-23T11:46:33.440 に答える