最近チームで Rolldown 安定版の全面適用を導入し、多くの経験を積みました。参考のためにまとめましたので、同様の作業をされている方のお役に立てれば幸いです。

コアコンセプト

この基盤の上で、さらに最適化できます：

module.exports = {
  entry: "./src/index.js",
  output: { path: __dirname + "/dist", filename: "[name].[contenthash:8].js" },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: { test: /[\\/]node_modules[\\/]/, name: "vendors" },
      },
    },
  },
};

このパターンは大規模プロジェクトで非常に実用的で、メンテナンスコストを大幅に削減できます。

詳細解説

実際のプロジェクトでの使い方はより複雑になります：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { "@": resolve(__dirname, "src") } },
  server: {
    port: 3000,
    proxy: { "/api": { target: "http://localhost:8080", changeOrigin: true } },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["vue", "vue-router", "pinia"],
          utils: ["lodash-es", "dayjs"],
        },
      },
    },
  },
});

この方法により、コードのテスタビリティとスケーラビリティが向上します。

導入経験

以下は完全な例です：

module.exports = {
  entry: "./src/index.js",
  output: { path: __dirname + "/dist", filename: "[name].[contenthash:8].js" },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendor: { test: /[\\/]node_modules[\\/]/, name: "vendors" },
      },
    },
  },
};

エッジケースの処理に注意してください。これは本番環境では非常に重要です。

チューニング戦略

重要なのはコアロジックを理解することです：