このブログのテーマのJavaScript、CSS は Webpack 4 を使って Build しています。
CSS を OptimizeCSSAssetsPlugin を使って最適化したので、実施したことを記載します。

前提

以下、前提となる条件を記載します。

  • MiniCssExtractPlugin を使っている
    Webpack 4 では、CSS ファイルの抽出に、MiniCssExtractPlugin を使います。
    OptimizeCSSAssetsPlugin を使用するために、CSS ファイルを抽出する必要があります。

webpack 4とmini-css-extract-pluginを使ってCSSを別ファイルに書き出す方法 | フロントエンドBlog | ミツエーリンクス

OptimizeCSSAssetsPlugin のインストール、設定

OptimizeCSSAssetsPlugin とは

NMFR/optimize-css-assets-webpack-plugin: A Webpack plugin to optimize minimize CSS assets. は、CSS を最小化する plugin です。CSS の最小化を行うライブラリが選択でき、デフォルトではcssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem. が使われます。
cssnano の挙動を変更したい場合は、Optimisations - 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 次第かとは思いますが、これぐらいだったら、デフォルトの指定でもいいかと思います。

参考

以下、参考にしました。

以上です。

コメント

カテゴリー

最近の投稿