このブログの
CSS を
前提
以下、
- MiniCssExtractPlugin を
使っている
Webpack 4 では、CSS ファイルの 抽出に、 MiniCssExtractPlugin を 使います。
OptimizeCSSAssetsPlugin を使用する ために、 CSS ファイルを 抽出する 必要が あります。
webpack 4と
OptimizeCSSAssetsPlugin の インストール、 設定
OptimizeCSSAssetsPlugin とは
NMFR/optimize-css-assets-webpack-plugin: A Webpack plugin to optimize minimize CSS assets. は、
cssnano の
インストール
npm i -D optimize-css-assets-webpack-plugin
設定
OptimizeCSSAssetsPlugin の
presetの
設定に ついて
Optimisations - cssnano の設定を 見ると、 default
、advanced
があり、 幾つか 設定が 違いました。
設定差異と双方で disabled に なっている オプションに ついて 記載します。 autoprefixer
ブラウザオプションに基づいて 不要な プレフィックスを 削除できます。
デフォルトでは、CSSファイルに 新しい プレフィックスは 追加されません。 discardUnused
使用されていない @ルール を削除します。
別のスタイルシートで @ルールを 参照している 場合も 無視して 削除されます。 mergeIdents
名称が異なる 同一の @ルールを マージします。
JavaScriptファイル等で、参照している 場合も 無視して 削除されます。 reduceIdents
@ルールの名称を 短い 名称に 変更します。
他のJavaScriptファイル、 CSSファイルが この 定義を 参照する 場合も 無視して 削除されます。 zindex
z-index値を再調整します。 他の スタイルシートや JavaScriptが 挿入した スタイルと 衝突する 可能性が あるため、 これは 危険です。 cssDeclarationSorter
プロパティ名に基づいてCSS宣言を ソートします。
ソートされた CSS はgzip化すると、 サイズが 小さくなります。
cssnano-preset-advanced の
インストール
Advanced transforms - cssnano に記載が ありますが、 cssnano の advanced preset を 使用する 場合は、 cssnano-preset-advanced
をインストールする 必要が あります。 npm i -D cssnano-preset-advanced
webpack.config.js の
設定 const Merge = require("webpack-merge"); const BaseConfig = require("./webpack.config.js"); const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = Merge(BaseConfig, { plugins: [], optimization: { minimizer: [ new TerserPlugin({ extractComments: 'all', terserOptions: { compress: { drop_console: true, }, }, }), new OptimizeCSSAssetsPlugin({ cssProcessorPluginOptions: { preset: ['advanced', { autoprefixer: { // autoprefixerによる vendor prefix の追加を行う add: true, // サポートするブラウザVersionの指定 browsers: ["last 2 versions", "ie >= 11", "Android >= 4"] }, // ライセンスも含めて、コメントを全て削除する discardComments: { removeAll: true }, // CSSの定義のソートを行う cssDeclarationSorter : { order: 'smacss' } } ], }, canPrint: true }) ], }, });
オプション設定の
変更でどの 程度 CSS の 削減が できたか?
オプション無しの指定 new OptimizeCSSAssetsPlugin({})
に比べて、 上記の オプションを 指定した 場合だと、 ファイルサイズは 1KB 程度削減されました。
最適化対象のCSS 次第かとは 思いますが、 これぐらいだったら、 デフォルトの 指定でもいいかと 思います。
参考
以下、
- PostCSS まとめ - Qiita
- zoobestik/csso-webpack-plugin: CSSO full restructuring minification files to serve your webpack bundles
- CSSベンダープレフィックス-webkit-を
今この 瞬間に 辞める 為の Autoprefixerの 導入 - Qiita - Advanced transforms - cssnano
- Siilwyn/css-declaration-sorter: Sort CSS declarations fast and automatically in a certain order.
- Autoprefixerの
対象ブラウザの 選び方 | Rriver
以上です。
コメント