Webpack5でよく使うプラグイン紹介
はじめに
バンドルを最適にしたい場合はどうすればよいのでしょうか？
それは、プラグインを活用することです。
プラグインは、バンドル自体の作成方法を変更するのに役立ちます。
例えば、uglifyjs-webpack-pluginは バンドルされたJavascriptファイルを minify (圧縮) して、バンドルサイズを最小に抑えてくれます。
プラグインは、pluginsプロパティを追加することで、設定を追加してくれるのです。
圧縮と軽量化
ファイルを minify することで、ファイルのバンドルサイズが軽量化や通信も削減されます。
圧縮方法は明快で、terser-webpack-plugin を使用します。(webpack5ではビルトインされています。)
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,
},
},
}),
],
},
...
};
設定の詳細はこちら
バンドルファイルを分離
JavaScriptファイルとCSSファイルを分離することで、JavaScriptファイルのバンドルサイズを軽量化してくれます。
webpack5を使用する場合はmini-css-extract-pluginを使用してみましょう。
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/**",
]
}
参考文献
Discussion