web-dev-qa-db-ja.com

92％チャンクアセットの最適化-Webpack

Webpackは、単純なjs/cssの変更を示すために、約30秒以上92％チャンクアセットの最適化でスタックしているようです。誰もが正気で座って自分の人生の大部分を待って、すぐにレンダリングされるものを見るには長すぎます。

私たちは開発モードになっています（したがって、レイテンシに追加するソースマップが必要です）が、30秒以上であってはなりません。また、uglifyを使用していません（これはGitHubでかなりの時間を費やしていると見たことがあります）。

ビルド時間をほぼ瞬時に、または現在よりはるかに速くするにはどうすればよいですか？

[〜＃〜] update [〜＃〜]

laravel-mixファイル：

let mix = require('laravel-mix');

mix.react('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .options({
     processCssUrls: false
   });

mix.webpackConfig({
    // Note: First build will always be slower regardless
    // Here we're talking about rebuild time

    // If commented out, rebuild is ~6 secs
    // devtool: "inline-source-map",

    // If not commented out, rebuild is 30+ secs
    devtool: "inline-source-map",
});

inline-source-mapは、ソースで修正するエラーの行に関する最も詳細な情報を提供するため、最も迅速なデバッグに最適です。どこで修正するかは非常に簡単です。他のタイプは比較するとわかりにくいので、ソース内で修正する行番号が示されていないため、デバッグに時間がかかります。

どうやってやるの？それを修正するためにソースのエラー行番号でデバッグすることができる一方で、非常に高速に再構築する方法はありますか（chrome devtoolsコンソールに表示）？

javascriptreactjswebpackwebpack-2laravel-mix
9
Wonka

次の組み合わせを使用して、大きな成功を収めました。

https://github.com/mzgoddard/hard-source-webpack-plugin

そして

https://github.com/amireh/happypack

HardSourceWebpackPluginは、モジュールの中間キャッシングステップを提供するwebpackのプラグインです。結果を表示するには、このプラグインでwebpackを2回実行する必要があります。最初のビルドには通常の時間がかかります。 2番目のビルドは大幅に高速になります。

HappyPackは、ファイルを並行して変換することにより、初期のwebpackビルドを高速化します。

報告して、それがどうなるか教えてください。

1
KFE

ng buildコマンドの実行中に同じ問題に直面しました。

次のエラーが表示されました。

92％のチャンクアセットの最適化

プロセスは92％で停止しましたが、次のコマンドは正常に機能しています。

これらを試してください：

pm2 stop all

ng build

pm2 start all

プロセスマネージャーとしてpm2を使用しています。

私もそれがあなたのために働くことを願っています。

0
hardy