3

SASS ビルドを gulp + node-sass から sass-loader を使用して webpack に移動しようとしています。

参考までに、gulp + node-sass 3.2 のビルド時間は約 2.5 ~ 3 秒です。

webpack では、読み込みに style!raw!sass を使用すると、10 ~ 秒のビルドが表示され、ソースマップは表示されません (raw ローダーのため)。ソースマップの css ローダーを機能させると、追加の解析によりビルドに 20 ~ 30 秒かかります。

物事を改善するためにどのようなトリックを使用できるか疑問に思っています。現時点で私ができる最善の方法は、javascript から SASS への多くの require(...) を使用して sass コンパイルを分割し、それらを 1 つのファイルに連結することです。-watch オプションを使用すると、偽のインクリメンタル コンパイルが可能になるため、最初のビルド後はそれほど悪くはありません。

それを超えて、より良いものにするために何かできることはないかと考えています。gulp + nodeass の 10 倍の速度低下は良くありませんが、ビルド ツールが 2 つあるのも良くありません (膨大な量のコードがあっても、webpack は JS で 100% 正常に動作します)。

4

1 に答える 1

0

Webpack、プリプロセッサ、ソースマップ、およびビルド速度に関するこの素晴らしい記事をご覧ください: http://eng.localytics.com/faster-sass-builds-with-webpack/

私は現在、node-sass (および libsass)、cssmodules (コンポーネント/コンテナーごとに 1 つずつスタイルシートを分離)、インライン sourceMaps、および HMR で sass-loader を使用しています。更新されたスタイルで変更されたコンポーネントをリロードするのに 2 ~ 3 秒かかります。

ここで構成の例を見ることができます: https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js

于 2016-03-12T23:42:17.027 に答える