まだWebpackで消耗してるの？

社内LTの発表資料

Transcript

1. まだ Webpack で消耗してるの？
2. tl;dr 自社サイトのフロントエンドのビルドが遅すぎて辛い ビルドツールを Webpack ⇨ Vite に置き換えた ビルドが最大 6 倍程度早くなった（後述）
3. Vite（ヴィート） ノーバンドルのビルドツール webpack や他と違って最低限のバンドル（プレバンドル）のみ行うためビルドが爆速 dynamic import, import.meta というブラウザ標準機能を活用 HMR（ファイル変更のブラウザへの自動反映）も爆速
4. どんくらい使われてんの state of js 2021 を参考に
6. どうやって使うの
7. Laravel Vite https://laravel-vite.dev/ webpack でいう Laravel mix 的なやつ vite 本体を抽象化して扱いやすくしたもの 新規の Laravel プロジェクトならコマンド一発でセットアップ完了するよ npx @preset/cli apply laravel:vite
8. とりあえず使ってみる
9. セットアップ手順 諸々バージョンアップ 設定ファイル修正
10. 必須要件 vite vue: ^3.0 laravel-vite PHP: ^8.0 Laravel: ^8.0 ※ その他依存ライプラリは割愛
11. 蛇足（愚痴） vue2⇨3 の migration がまあまあ辛い（これで丸 3 日費やしたなんて言えない） vue-property-decorator が vue3 対応しておらずデコレータを認識できずにエラーに vue2 のままでも vite が使えるようになるライブラリ（vite-plugin-vue2）を入れて何と か頓挫せずに済んだ
12. 設定ファイル修正 webpack の既存設定を vite 向けにアレンジ
13. import { defineConfig } from 'vite' import laravel from 'vite-plugin-laravel' import eslint from 'vite-plugin-eslint' import { createVuePlugin as vue } from 'vite-plugin-vue2' import path from 'path' import glob from 'glob' export default defineConfig(({ command }) => ({ base: '', build: { root: '/', base: '/', manifest: true, outDir: path.resolve(__dirname, 'public/assets'), rollupOptions: { input: glob.sync('resources/js/**/*.ts').map(function (file) { return file }), output: { chunkFileNames: '[name].chunk.js?id=[hash]', }, }, }, plugins: [vue(), laravel(), eslint()], resolve: { alias: [ { find: '@js', replacement: path.resolve(__dirname, 'resources/js'), }, { find: '@img', replacement: path.resolve(__dirname, 'resources/img'), }, { find: '@sass', replacement: path.resolve(__dirname, 'resources/sass'), }, { find: '@node_modules', replacement: path.resolve(__dirname, 'resources/node_modules'), }, { find: /^~(.*)$/, replacement: '$1', }, ], // デフォルトでは.vue が入っていない extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', 'vue'], }, optimizeDeps: { include: ['vue'], }, }))
14. webpack とパフォーマンス比較してみる
15. ビルド ※ 設定を完全には引き継げてないので出来る限り条件を揃えた上で比較 webpack vite（手動計測） 1 回目 202.88s 31.52s 2 回目 179.62s 29.76s
16. 開発サーバ立ち上げ vite 初回：3563ms 2 回目：1545ms
17. 出来なかったこと 画面表示まだ出来てない（とりあえずビルド通った状態） 設定の移行も不十分 sass の import 文のワイルドカード対応とか webpack4→5 のパフォーマンス比較も未検証 他ツールの HMR との反応速度の比較もしたい
18. 所感 噂通りの爆速具合で DX はかなり改善されそう 中で esbuild とか rollup を使ってるので本格導入するならその辺のキャッチアップも必 要
19. 参考 https://ja.vitejs.dev/ https://laravel-vite.dev/ https://2021.stateofjs.com/en-US/ https://zenn.dev/uhyo/articles/what-is-native-esm-era https://2021.stateofjs.com/en-US/libraries/build-tools