2017-09-08 8 views
0

Webpackを正常に使用してES6を生成するTypeScriptプロジェクトがあります。これはbabel-minifyを実行してツリーシェイクし、かなり小さなバンドル出力ファイルを生成します。webpack内のモジュールのインポートパスを細くする

このファイルには、私が使用しているインポートライブラリの作品のそれぞれのロジックだけでなく、私自身のプログラムからのすべてのロジックを含むように表示されます(例えばrxjs、lodashなど)

しかし、I生成されたファイルを見て、上に私たちはいくつかのwebpackロジックを持っているように見えます。そして、元のインポートのパスのマップを、それを実装する関数にマップします。さまざまな部分が依存関係とそのパス文字列を指しています。

ここで、すべてがこのWebpackバンドル(他のチャンクなし)内に自己完結していることを考えると、すべてのソースファイル名が不必要に多くのスペースを占めるようです。

は、例えば、私はlodashのisBooleanスクリプトのためにここに一つのセクションで探しています:

"./node_modules/lodash/isBoolean.js": function(e, t, o) { 
    var r = o("./node_modules/lodash/_baseGetTag.js"), 
     s = o("./node_modules/lodash/isObjectLike.js"); 
    e.exports = function(e) { 
     return !0 === e || !1 === e || s(e) && "[object Boolean]" == r(e) 
    } 
}, 

を今、文字の多くは、ソースファイルを記述するために取り込まれがあるように思えます。ソースファイルで、この時点での実際の依存関係がありませんので、なぜそれぞれのキーは、単に次の例のように、全体に短い文字列識別子に置き換えることはできません。

"a": function(e, t, o) { 
    var r = o("b"), 
     s = o("c"); 
    e.exports = function(e) { 
     return !0 === e || !1 === e || s(e) && "[object Boolean]" == r(e) 
    } 
}, 

ここで、「A」、「B」 、および "c"はすべて、元の文字列値がバンドル全体で発生する各場所を表しています。これは、すべての文字列に影響を与えるべきではなく、インポートファイルのパス文字列に影響を与えるべきです。

Webpack compress path namesに似たような質問をしている人がいると思われますが、私の意見では、本当に満足のいく答えが得られていません。

モジュールのパス名を変更できるオプションやプラグインがありますか?

答えて

0

Webpackのソースコードを読んで実際にどのように組み立てているのかを理解した後、

私の設定にはNamedModulesPluginがありました(そこにあるさまざまなクイックスタートのアーティファクトである可能性が高い)、このプラグインはすべてのモジュールパスを出力に挿入します。

configからout(または単に削除)すると、出力から完全に削除されます(必要なマングリングは必要ありません)。

関連する問題