WebpackにSWC(Rust版esbuild)を組み込む

webpackの遅さは異常

関連記事:

長いことvueを使っていて、
ビルドツールにはviteを使ってという組み合わせが当たり前になった。

ところが今回の案件ではReact

('Д') ナンモワカラン

return にテンプレを書く キモイ 構文は相変わらず。
まぁそれはいいとして。

laravel-mixも一緒に使っているからか、
ビルドツールがwebpackだった。

それにしても、
('ω') ビルドに５分かかるのはどうよ。。。

とうことでバベってるあたりを高速化したい。
最初は rspack や turbopack を考えたが
乗せ換えがうまくいかなかったので、
loaderを esbuild か swc にする方向にした。

swcでうまくいきそうなので、
今回はそちらに換装で。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

webpack環境を用意

手っ取り早くwebpackの環境が欲しいので、
boilerplateをそのまま使用。

https://createapp.dev/webpack/react--babel--css--postcss--react-hot-loader--typescript

ダウンロードしたファイルを webpack.zip とする
普通にnpm iだとreact-hot-loaderがコンフリクトするっぽいので、
いったん削除して再度入れ直し
(本筋からずれちゃったなぁ)

bash

mkdir -p ~/webpack-project
mv path/to/webpack.zip ~/webpack-project
cd ~/webpack-project
unzip webpack.zip
npm remove react react-dom react-hot-loader @types/react @types/react-dom @hot-loader/react-dom
npm i react react-dom react-hot-loader
npm i -D @types/react @types/react-dom @hot-loader/react-dom
npm run start

^http://localhost:8080/

(^_-)-☆ おｋ

速度比較

ファイル数二つしかないから大した差はないと思うが、
比較してみよう。

ts-loader

オリジナルであるts-loaderの計測

ts-loader

time npm run build-prod
> webpack-project@1.0.0 build-prod
> webpack --mode production
・・・
webpack 5.84.1 compiled successfully in 3578 ms
________________________________________________________
Executed in    4.14 secs    fish           external
   usr time    5.99 secs   66.00 micros    5.99 secs
   sys time    0.24 secs  307.00 micros    0.24 secs

4.14 secs

swc-loader

swcをインストール

bash

npm i -D @swc/core swc-loader

設定値を調整

webpack.config.js

       {
         test: /\.ts(x)?$/,
-         loader: 'ts-loader',
+         use: {
+           loader: "swc-loader",
+           options: {
+               jsc: {
+                   parser: {
+                       syntax: "typescript"
+                   }
+               }
+           }
+         },
         exclude: /node_modules/
       },

計測してみる

bash

time npm run build-prod
> webpack-project@1.0.0 build-prod
> webpack --mode production
・・・
webpack 5.84.1 compiled successfully in 2271 ms
________________________________________________________
Executed in    2.83 secs    fish           external
   usr time    4.00 secs    0.00 micros    4.00 secs
   sys time    0.17 secs  348.00 micros    0.17 secs

2.83 secs

( Д ) ' '

わずか数十行のコードでも1.5倍ぐらい違う。
これは実際だと大きく差が出そうだ。

------------------- ↓ 後書きはここから ↓-------------------

laravel-mixでの設定

本稿はwebpackでのインストール方法を記載したが、
laravel-mixでの設定も記載しておく

インストール

npm i -D @swc/core swc-loader laravel-mix-swc 

webpack.mix.js

const mix = require('laravel-mix');
const webpack = require('webpack');
require('laravel-mix-swc');

mix
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.ts[x]$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'swc-loader',
          },
        },
      ],
    },
  })
  .swc("resources/js/app.js", "public/js")