Webpack Bundle Size 最適化の完全ガイド｜初心者向け解決方法
未分類
Webpack Bundle Size 最適化の完全ガイド｜初心者向け解決方法
Webpackを使用してプロジェクトをビルドしていると、バンドルサイズが想定以上に大きくなってしまう問題に直面することがあります。バンドルサイズが大きいと、ユーザーのページ読み込み時間が長くなり、結果としてユーザー体験（UX）の低下につながります。この記事では、Webpackのバンドルサイズを最適化する方法を、初心者でも理解できるように詳しく解説します。
バンドルサイズが大きくなる原因
まず、Webpackのバンドルサイズが大きくなる主な原因を理解することが重要です。
不要なライブラリの読み込み
プロジェクトに導入したライブラリの中で、実際には使用していないコードが含まれていることがあります。これは特にnpmパッケージの場合、パッケージ全体がバンドルに含まれるため、問題になりやすいです。
コード分割の不足
すべてのコードを1つのバンドルファイルに含めると、初期読み込み時に大量のJavaScriptを処理する必要があります。本来は後で読み込まれるべきコードまで一度に読み込まれます。
ソースマップの本番環境への含有
開発用のソースマップが本番環境にも含まれている場合、ファイルサイズが大幅に増加します。
ライブラリの重複
異なるバージョンの同じライブラリが複数回バンドルに含まれることがあります。
バンドルサイズ最適化の解決手順
1. バンドルサイズを可視化する
最初に、何が実際にバンドルに含まれているのかを確認する必要があります。webpack-bundle-analyzerを使用して、バンドルの内容を視覚化できます。
npm install --save-dev webpack-bundle-analyzer
webpack.config.jsに以下を追加します：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'report.html',
})
]
};
ビルドを実行すると、バンドルの内容を視覚的に確認できるHTMLレポートが生成されます。
2. コード分割（Code Splitting）の実装
すべてのコードを1つのバンドルに含めるのではなく、複数のバンドルに分割することで、初期読み込みサイズを削減できます。
ルートベースのコード分割
import { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));
export default function App() {
return (
Loading...
}>
} />
} />
} />
);
}
webpack.config.jsでの設定
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].chunk.js',
path: __dirname + '/dist',
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\\\/]node_modules[\\\\/]/,
name: 'vendors',
priority: 10,
reuseExistingChunk: true,
},
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true,
},
},
},
},
};
3. ツリーシェイキング（Tree Shaking）の有効化
ツリーシェイキングは、使用していないコードをバンドルから削除する機能です。モダンなブラウザと適切な設定があれば、Webpackが自動的に実行します。
// webpack.config.js
module.exports = {
mode: 'production', // 'production'モードでツリーシェイキングが有効化される
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
optimization: {
usedExports: true, // 使用されていないエクスポートを特定
sideEffects: false, // サイドエフェクトがないことを宣言
},
};
package.jsonで「sideEffects」を明示することも重要です：
{
\"name\": \"my-project\",
\"version\": \"1.0.0\",
\"sideEffects\": false,
\"dependencies\": {
\"react\": \"^18.0.0\"
}
}
4. 動的インポートの活用
必要な時点でのみライブラリを読み込むことで、初期バンドルサイズを削減できます。
// ボタンクリック時にチャートライブラリを読み込む
async function loadChart() {
const Chart = await import('chart.js');
// チャートの描画処理
const ctx = document.getElementById('myChart').getContext('2d');
new Chart.default(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'Data',
data: [10, 20, 30],
}],
},
});
}
document.getElementById('loadChartBtn').addEventListener('click', loadChart);
5. ファイルの圧縮と最小化
本番環境では、JavaScriptとCSSを圧縮・最小化することが重要です。
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js',
path: __dirname + '/dist',
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // console.logを削除
},
},
}),
new CssMinimizerPlugin(),
],
},
};
6. 環境変数の活用
開発環境と本番環境で異なる設定を使用することで、本番環境のバンドルサイズをさらに削減できます。
const webpack = require('webpack');
module.exports = (env) => {
const isProduction = env.production;
return {
mode: isProduction ? 'production' : 'development',
entry: './src/index.js',
output: {
filename: isProduction ? '[name].[contenthash].js' : '[name].js',
path: __dirname + '/dist',
},
devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(
isProduction ? 'production' : 'development'
),
}),
],
};
};
実践的なコード例
完全なwebpack.config.jsの例
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = (env) => {
const isProduction = env?.production || false;
return {
mode: isProduction ? 'production' : 'development',
entry: './src/index.js',
output: {
filename: isProduction ? '[name].[contenthash].js' : '[name].js',
chunkFilename: isProduction ? '[name].[contenthash].chunk.js' : '[name].chunk.js',
path: path.resolve(__dirname, 'dist'),
clean: true, // ビルド前にdistを削除
},
devtool: isProduction ? false : 'cheap-module-source-map',
module: {
rules: [
{
test: /\\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
},
{
test: /\\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
optimization: {
minimize: isProduction,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: isProduction,
},
},
}),
new CssMinimizerPlugin(),
],
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\\\/]node_modules[\\\\/]/,
name: 'vendors',
priority: 10,
reuseExistingChunk: true,
},
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true,
},
},
},
runtimeChunk: 'single',
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(
isProduction ? 'production' : 'development'
),
}),
...(isProduction ? [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'bundle-report.html',
openAnalyzer: false,
}),
] : []),
],
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000,
hints: isProduction ? 'warning' : false,
},
};
};
package.jsonのスクリプト設定
{
\"name\": \"webpack-optimization-project\",
\"version\": \"1.0.0\",
\"sideEffects\": false,
\"scripts\": {
\"dev\": \"webpack serve --mode development\",
\"build\": \"webpack --env production\",
\"analyze\": \"webpack --env production --analyze\"
},
\"devDependencies\": {
\"@babel/core\": \"^7.22.0\",
\"@babel/preset-react\": \"^7.22.0\",
\"babel-loader\": \"^9.1.2\",
\"css-loader\": \"^6.8.1\",
\"css-minimizer-webpack-plugin\": \"^5.0.1\",
\"style-loader\": \"^3.3.3\",
\"terser-webpack-plugin\": \"^5.3.9\",
\"webpack\": \"^5.88.0\",
\"webpack-bundle-analyzer\": \"^4.9.0\",
\"webpack-cli\": \"^5.1.4\",
\"webpack-dev-server\": \"^4.15.1\"
},
\"dependencies\": {
\"react\": \"^18.2.0\",
\"react-dom\": \"^18.2.0\"
}
}
よくある間違いと対策
間違い1: 本番環境でソースマップを含める
❌ 間違った例：
module.exports = {
devtool: 'source-map', // 本番環境でもソースマップが生成される
mode: 'production',
};
✅ 正しい例：
module.exports = (env) => {
return {
devtool: env.production ? false : 'source-map',
mode: env.production ? 'production' : 'development',
};
};
間違い2: すべてのライブラリをデフォルトインポートする
❌ 間違った例：
// lodashの全機能がバンドルに含まれる
import _ from 'lodash';
const result = _.map([1, 2, 3], x => x * 2);
✅ 正しい例：
// 必要な機能のみインポート
import map from 'lodash/map';
const result = map([1, 2, 3], x => x * 2);
間違い3: splitChunksの設定を無視する
❌ 間違った例：
module.exports = {
optimization: {
splitChunks: {
chunks: 'async', // デフォルト設定では十分に最適化されない
},
},
};
✅ 正しい例：
module.exports = {
optimization: {
splitChunks: {
chunks: 'all', // 同期・非同期両方をコード分割
cacheGroups: {
vendor: {
test: /[\\\\/]node_modules[\\\\/]/,
name: 'vendors',
priority: 10,
},
},
},
},
};
間違い4: 動的インポートを使わずにすべて読み込む
❌ 間違った例：
// 初期読み込み時にすべてのモジュールが読み込まれる
import ChartModule from './modules/ChartModule';
import MapModule from './modules/MapModule';
import DataTableModule from './modules/DataTableModule';
// ページ初期化時には、チャートだけ必要
✅ 正しい例：
// 必要な時点でのみ読み込む
const loadChartModule = async () => {
const ChartModule = await import('./modules/ChartModule');
return ChartModule.default;
};
// ユーザーがチャートを要求した時点で読み込み
document.getElementById('chartBtn').addEventListener('click', async () => {
const Chart = await loadChartModule();
// チャートの描画処理
});
間警告4: package.jsonでsideEffectsを宣言しない
❌ 間違った例：
{
\"name\": \"my-project\",
\"version\": \"1.0.0\"
// sideEffectsの宣言がない
}
✅ 正しい例：
{
\"name\": \"my-project\",
\"version\": \"1.0.0\",
\"sideEffects\": false,
// または特定のファイルのみ指定
\"sideEffects\": [\"*.css\", \"*.scss\"]
}
バンドルサイズ最適化の測定
最適化の効果を測定することが重要です。以下のツールを活用してください：
webpack-bundle-analyzerでの確認
前述のBundleAnalyzerPluginで生成されたレポートから、以下を確認できます：
- 各ライブラリの実サイズ
- gzip圧縮後のサイズ
- バンドル内の重複
ビルドサイズの監視
# ビルド後のファイルサイズを表示
npm run build
ls -lh dist/
まとめ
Webpackのバンドルサイズ最適化は、ユーザーの読み込み時間短縮に直結する重要なタスクです。以下のポイントを押さえることで、効果的な最適化ができます：
- 可視化：webpack-bundle-analyzerで現状を把握する
- コード分割：splitChunksとlazy loadingを活用する
- ツリーシェイキング：本番環境で自動実行される仕組みを理解する
- 圧縮：TerserPluginとCssMinimizerPluginで最小化する
- 動的読み込み：必要な時点でのみライブラリを読み込む
- 環境分離：開発環境と本番環境で異なる設定を使う
これらの手法を段階的に実装することで、バンドルサイズを大幅に削減し、アプリケーションのパフォーマンスを向上させることができます。定期的にバンドルサイズを測定し、継続的に最適化することをお勧めします。
