タグ vite
人気順 5 users 50 users 100 users 500 users 1000 usersBun + Vite を使って速度を比較してみる!! - iimon TECH BLOG
こんにちは!株式会社iimonでフロントエンジニアをしているおくしまです! 本記事はアドベントカレンダー24日目の記事となります! ■はじめに Bunのアイコンが可愛くて興味を持ち、調べてみたところ、処理速度が速いとのこと。ますます気になってきました! なのでBunしていきます! ■Bunについて BunはJavaScriptの実行... 続きを読む
主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも | レバテックラボ(レバテックLAB)
主要バンドラーの仕様を徹底比較。Import Maps、Viteなど「脱バンドラー」の動きも 2024年10月15日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に... 続きを読む
unjs/unbuildに入門してみた - くらげになりたい。
pnpm workspace+TypeScriptなmonorepoで、 Cloud Functions for Firebaseを開発していたときに、 unjs/unbuildでビルドしてみたときの備忘録(*´ω`*) 少ない設定でビルドができて便利(*´ω`*) unbuildとは unjs/unbuild: 📦 A unified JavaScript build system 「A unified JavaScript build system」らしい。 Viteがフ... 続きを読む
Vite ってよく聞くけど何なんですか? あれは
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか?? なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません ... 続きを読む
Honoで雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできるので、雑React SPA環境作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト... 続きを読む
フルスタック Web フレームワーク HonoX を使ってみる
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX ... 続きを読む
MicroCMSとViteで作るかんたん静的サイト | DevelopersIO
この記事では、ヘッドレスCMSを使ってHTMLコンテンツを生成する手順を紹介します。 前回の記事(MicroCMSと11tyで作るかんたん静的サイト)ではAPIデータの取得とHTMLの生成のみを行いましたが、今回はSassを使うためにビルドツールであるViteを導入して、より実制作に近い環境での検証をします。 ビルドツールであればG... 続きを読む
2023-10-10のJS: Rollup 4.0.0、Viteの今後(Rustify Vite)、pnpm v8.9.0
JSer.info #664 - Rollup 4.0.0がリリースされました。 Release v4.0.0 · rollup/rollup Node.js 14/16のサポート終了、Acornの代わりにSWCをパーサに使うように変更されています。 SWC利用に伴うオプションの削除や非推奨なオプションの削除などが含まれています。 Viteの現在と今後についてがViteConfで発表されていま... 続きを読む
フロントエンドをViteからNext.jsに書き換えた話 〜パフォーマンス編〜 - 株式会社ヘンリー エンジニアブログ
こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上... 続きを読む
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場
Webブラウザ上にNode.jsを実装、Webブラウザ上のサーバサイドでNext.jsやVite、Astroなどが実行可能な「Sandpack 2.0」が登場 クラウド上でマイクロVMベースのオンライン開発環境などを提供するCodeSandboxは、Webブラウザ上で抽象化したNode.jsを実装しWebブラウザ上にJavaScriptのサーバサイド環境を作り出すことで、W... 続きを読む
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω`*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω`*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "aut... 続きを読む
レガシーなMPAアプリケーションをwebpackからviteに移行する話
株式会社iCAREでは、Vue2.6(※2.7に移行中)+Composition APIで開発を行っており、vue2系では比較的モダンな構成です。一方、Ruby on RailsのView毎にVueインスタンスを生成するMPAであり、アプリケーション全体の構成としては、レガシーな構造になっています。 エントリーポイントが多いことによる弊害で、サービス拡大に... 続きを読む
React + Goで簡素な掲示板アプリを作ってみた | フューチャー技術ブログ
はじめにこんにちは。金融グループ所属、新人の藤戸四恩です。 本記事は夏の自由研究ブログ連載2022 5日目の記事です。 今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。 夏の自由研究ということで、以前から気になっていたviteを使って開発しました。 いままでフロントエンドの開発環境を作成す... 続きを読む
CRAからViteへ移行して190倍高速なdev server起動を得る - inSmartBank
ある日突然、あなたに190倍(当社比)高速なdev serverができたらどうしますか...? この投稿ではWebアプリケーションのビルドツールをCreate React AppからViteへと移行した背景・手順・結果について説明します。 Vite等のビルドツールやフロントエンドアプリケーションの開発体験に興味・関心がある方、中でもCreate R... 続きを読む
Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは!フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか? 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文... 続きを読む
やっぱりwebpackがわからない(エピソード1)
webpackがわからない 最近はViteが注目されだして、実際にとても良いビルドツールです。Vue.jsのEvan Youさんが開発しただけのことはありますね。ネーミングもイカしてます。しかし、だからといって、では開発環境にViteを採用しようと簡単にはできないのが、業務の辛い所です。新しい技術を採用して、「わしが全責任を... 続きを読む
2022年の最新標準!Vue 3の新しい開発体験に触れよう
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueC... 続きを読む
Vite + React で新規プロジェクトの開発環境を作ろう
2022年1月18日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます! この記事は動... 続きを読む
Cloudflare Pages + Functions + Workers KV + vite + preactで簡単なページを作った
今回作ったページは下記。 https://haropuro-shuffle.pages.dev/ 元ネタ リポジトリ YuheiNakasaka/haropuro-shuffle 簡単なルーレットアプリ。ルーレットで出た結果をWorkers KVに保存。保存された文字を都度更新して表示(リアルタイムではない)。結果が1000件を超えるとクリアされる。 開発の流れ Workers KVの設定 vi... 続きを読む
Frontend Weekly LT(社内勉強会)で「Vite」について LT しました - BASEプロダクトチームブログ
はじめまして、フロントエンドエンジニアの @rry です。 BASE では社内勉強会として「Frontend Weekly LT」を毎週開催しています。 今回は Vite 特集で LT をしたので、Frontend Weekly LT の紹介も兼ねて内容を発信していきたいと思います。 Frontend Weekly LT とは BASE はフロントエンドエンジニアが、業務委託の方... 続きを読む
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite(ヴィート=フランス語で「速い」の意味)は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript(バニラJS)からVue.js・React・Svelteといった流行のフレームワークまで、さ... 続きを読む
Native ESM 時代のフロントエンドビルドツールの動向
No Bundle ツールの流行: vite / rollup モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするた... 続きを読む
Vue3への期待が広がる! Vue.js v-tokyo Meetup #11 参加レポート - Qiita
2020/08/25に開催されたv-tokyo#11の参加レポートです。 とても良い勉強会だったので見逃した方は是非スライドだけでも!! まちにまった Vue.js 3 @kazupon ?スライド: https://speakerdeck.com/kazupon/matinimatuta-vue-dot-js-3 ? 内容メモ: - SFCの改善PRについて - Viteの紹介 - vuedxの紹介 SFCの改善PR の内容... 続きを読む
フロントエンドの爆速な開発サーバを実現する Vite を試してみた - SMARTCAMP Engineer Blog
こんにちは!スマートキャンプでエンジニアをしている中川です。 先日Twitterを何気なく眺めていたところ、Vue.js 生みの親の Evan You氏が何やら興味深いツイートをしているのが目に止まりました。 As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with su... 続きを読む