🐕

Webpack5でよく使うプラグイン紹介

2022/04/11に公開

webpack

はじめに

バンドルを最適にしたい場合はどうすればよいのでしょうか？
それは、プラグインを活用することです。

プラグインは、バンドル自体の作成方法を変更するのに役立ちます。

例えば、uglifyjs-webpack-pluginはバンドルされたJavascriptファイルを minify (圧縮) して、バンドルサイズを最小に抑えてくれます。
プラグインは、pluginsプロパティを追加することで、設定を追加してくれるのです。

圧縮と軽量化

ファイルを minify することで、ファイルのバンドルサイズが軽量化や通信も削減されます。
圧縮方法は明快で、terser-webpack-plugin を使用します。(webpack5ではビルトインされています。)

example

import TerserPlugin from 'terser-webpack-plugin';

const config: webpack.Configuration = { 
    ...
    optimization: {
        minimizer: [
            new TerserPlugin({
                // 並列処理の実行を有効化
                // 同時に実行するを数値を設定
                parallel: 4,
                // swcを有効化
                // minify: TerserPlugin.swcMinify,
                // Minify Optionsを設定
                terserOptions: {
                    // 最適化
                    compress: {
                        ecma: 5,
                        warnings: false,
                        comparisons: false,
                        inline: 2,
                    },
                    // 変数名を短く
                    mangle: {
                        safari10: true,
                    },
                },
            }),
        ],
    },
    ...
};

設定の詳細はこちら

https://terser.org/docs/api-reference

バンドルファイルを分離

JavaScriptファイルとCSSファイルを分離することで、JavaScriptファイルのバンドルサイズを軽量化してくれます。
webpack5を使用する場合はmini-css-extract-pluginを使用してみましょう。

example

import MiniCssExtractPlugin from "mini-css-extract-plugin";

const config: webpack.Configuration = {
    ...
    plugins: [
        new MiniCssExtractPlugin({
            filename:'style.[contenthash].css'
        }),
    ],
    ...
    module: {
    rules: [
      {
        test: /\.module\.scss$/,
        use: [
           MiniCssExtractPlugin. Loader,
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
          {
            loader: "thread-loader",
            options: {
              workerParallelJobs: 2,
            },
          },
          "sass-loader",
        ].filter(Boolean),
      },
    ],
  },
}

設定の詳細はこちら

ブラウザキャッシングをしてみる

ブラウザキャッシングとはブラウザがCSSやJavascriptなどのデータを保存し、2回目以降の読み込みを高速にするのに役に立ちます。

これは、ファイル名にハッシュキーを指定することで、ブラウザがファイルのインデックスを簡単に生成してくれます。
キャッシュを追加するには、ファイルを名付けるときに [contenthash]キーワード を指定します。

output:{
    filename:'bundle.[contenthash].js',
    path:path.resolve(__dirname,'./dist'),
    publicPath:'/dist/'
},
plugins:[
    new MiniCSSExtractPlugin({
        filename:'style.[contenthash].css'
    })
]

おまけ

Tree shaking をしてみる

Tree　shaking はdead code (不要なコードや未使用なコード)を取り除くことです。

dead codeの特徴として

コードが実行されない
実行結果は未使用
読み込みがされない、書き込みのみの変数

などが挙げられます。どうやって、上記のコードを削除するのでしょうか？

package.jsonに sideEffects のプロパティにfalseを追加しましょう

{
  // 副作用のあるコードを無効化
  "sideEffects": false
}

webpack が未使用の exportなどを安全に除外してくれます。
ですが、副作用があるソースコードは使用できなくなるので副作用があるライブラリなどを使用しているファイルなどに対しては以下の通りに書く必要がありそうです。

package.jsonに副作用を許容するファイルを追加しましょう

{
  // 副作用のあるファイルを有効化
  "sideEffects": [
    "./src/side-effects.ts",
    "./src/side-effects/**",
  ]
}

参考文献

GitHubで編集を提案