Webpackイメージ/ CSSのビルド時間を改善しますか？

Question

は、私は最近、フロントエンドのプロジェクトを引き継いだ、と（ホットモジュールがリロードなどで）devスクリプトの最初の開始時間は約2分で、非常に長い時間がかかることに気づきました。

verboseからtrueに設定した後、私はこの時間のほとんどすべてがCSSを再コンパイルし、変更されていないイメージを費やしていることに気付きました。

のWebPACKビルドの出力は次のようになります長いリストである：

--------- 
Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/background.jpg 
--------- 
Hash: 0f500227a855ef9eb67c 
Version: webpack 2.1.0-beta.8 
Time: 68ms 
           Asset Size Chunks    Chunk Names 
.webpack.res.1504199219496_875923.js 132 kB  0 [emitted] main 
    + 1 hidden modules 

--------- 
Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/AppAuthorized.css 
--------- 
Hash: 83f1c479b77c7539baeb 
Version: webpack 2.1.0-beta.8 
Time: 549ms 
           Asset  Size Chunks    Chunk Names 
.webpack.res.1504199221679_732531.js 23.2 kB  0 [emitted] main 
    + 5 hidden modules 

画像が迅速に処理するように見えるが、これらの2キロバイトのCSSファイルのそれぞれは、コンパイルする半秒を取って、そこにされますそれらの何十もあります。何とかCSSコンパイルアップを高速化するために何かアドバイスは

var cssnext = require('postcss-cssnext'); 
var postcssFocus = require('postcss-focus'); 
var postcssReporter = require('postcss-reporter'); 
var precss = require('precss'); 
var syntax = require('postcss-scss'); 

module.exports = { 
    output: { 
    publicPath: '/', 
    libraryTarget: 'commonjs2', 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'], 
    modules: [ 
     'client', 
     'node_modules', 
    ], 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     exclude: /node_modules/, 
     loader: 'cache-loader!style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader', 
     }, 
     { 
     test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i, 
     exclude: /node_modules/, 
     loader: 'cache-loader!url-loader?limit=9999999999999', 
     }, 
     { 
     test: /\.ico$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
    ], 
    }, 
    postcss:() => ({ 
    plugins: [ 
     precss(), 
     postcssFocus(), 
     cssnext({ 
     browsers: ['last 2 versions', 'IE > 10'], 
     }), 
     postcssReporter({ 
     clearMessages: true, 
     }), 
    ], 
    syntax: syntax, 
    }), 
}; 

、またはキャッシュ資産：

は、ここに私のWebPACKの設定は次のようになりますか？

Answer 1

ホットリロードWebPACKのビルド/のパフォーマンスを向上させるために、私は通常、以下のリストをチェックして、私は正しいことやっていることを確認してください：DEVモードのenvについては

1. を、「正しいを設定するソース - 地図'。通常、私は最速と思われる「eval」と一緒に行きます。ここでベンチマークを見つけることができます：https://webpack.js.org/configuration/devtool/?_sm_au_=iHV0NZ57NZfZ44WQ

2. devモードenvでは、すべての最適化プラグインを削除して余分な時間がかかり、本番環境でのみ使用します。

3. devモードenvの場合、最新のバージョンによってはビルドが遅くなる可能性があるため、特にcss-loader、style-loader、およびsass-loaderの場合、package.jsonのローダーのバージョンを確認してください。詳細についてはhttps://github.com/webpack-contrib/css-loader/issues/124をご確認ください。バベル6

4. アップグレードは10％-20％の性能向上を与えることができます。 DEVモードのenvのための

5. 利用のWebPACK-devのサーバー。

6. は常に「時代遅れNPM」は、任意のモジュールが古すぎるチェックするために実行します。

7. は、コンピュータが遅すぎる実行されていないことを確認してください。再起動してください。