rollup.jsに爆速esbuildを組み込む方法
rollup-plugin-esbuildでそれぞれのいいとこ取り
関連記事
Webpack嫌いには光の速さで消えて欲しい筆者にとって、
バンドラーはもっぱらrollup.jsだった。
プラグインの豊富さからありとあらゆる場面で活用していたのだが、
最近バンドラーのトレンドにビルド速度というのがあり、
ちょっと気になる今日この頃。
esbuildやswcのようにGoやRustのようなハードウェアレイヤーの言語を使って、
ビルド実行をしてしまうアプローチ。
(緩募: 低レベル言語に変わる用語)
ネイティブ速度で動くわけでnodeで動く各種バンドラーでは歯が立たない。
まだesbuildは精度がーなんてのは最早過去の話。
１軍で活用されているようだ。
viteやParcelv2はビルドエンジンにesbuildやswcを使っているので、
rollup.jsでもできないと探してみたら良いものがあった。
それは
rollup.jsの使い勝手とesbuildのビルド速度を良いとこ取りできそうだ。
当然だけどNode.js入ってる前提。
適当に検索して使えるようにしておいて。
ヾ(・ω<)ﾉ" 三三三● ⅱⅲ コロコロ♪
------------------- ↓ 本題はここから ↓-------------------
TypeScriptベースのSvelteプロジェクトを作成
もはやTypeScriptは当たり前で、
ReactかVueを使うのも普通すぎる。
だが、Svelte推しなので。
npx degit sveltejs/template rollup-esbuild
cd rollup-esbuild
node ./scripts/setupTypeScript.js
npx npm-check-updates -u
npm i -D esbuild rollup-plugin-esbuild
npm run dev
ページを確認しておく
\http://localhost:5000
esbuild導入前
(^_^)V はろー世界
rollup.config.jsを変更
以下に該当するプラグイン記述を置き換える
- rollup-plugin-typescript2
- @rollup/plugin-typescript
- rollup-plugin-terser
今回だと@rollup/plugin-typescriptとrollup-plugin-terserになる
import livereload from 'rollup-plugin-livereload';
- import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
- import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
+ import esbuild from 'rollup-plugin-esbuild'
const production = !process.env.ROLLUP_WATCH;
・・・
commonjs(),
- typescript({
- sourceMap: !production,
- inlineSources: !production
- }),
+ esbuild({
+ sourceMap: !production,
+ minify: production,
+ }),
// In dev mode, call `npm run start` once
// the bundle has been generated
・・・
// If we're building for production (npm run build
// instead of npm run dev), minify
- production && terser()
],
オプションはお好みで。
見づらいので全文はこちら
動作確認
改めてページを確認しておく
\http://localhost:5000
esbuild導入後
何も変化無く、きちんとビルドされてることが確認できる。
(･∀･) これからは主力にしよう
Discussion