Vue ウィークリーレポート: Oxlint が ESLint の次元削減を攻撃! You Yuxiの反省。Vitest公式発表のアップグレード

毎週必見

「Vue の父」You Yuxi 氏は、トロントで開催された Vue Conference の出席者に対し、Vue 2 を Vue 3 にアップグレードする際にいくつかの痛い教訓を学んだ、と語った。

このボスは、You Yuxi のスピーチの一部の詳細を広め、フレームワークをアップグレードする際にオープンソースライブラリの作成者から得たいくつかの教訓とインスピレーションを共有しました。たとえば、Vue 2 を Vue 3 にアップグレードする場合、Vue チームは Vue エコシステムとタイムリーに調整する必要があります。大規模プロジェクト (Nuxt や Vuetify など) の作成者は情報を共有します。

ESLint の次元削減に対する Oxlint の攻撃

古いファンは皆、You Yuxi が Vite カンファレンスのスピーチで、Vite のフロントエンドインフラストラクチャのロールアップが Rust を使用してロールダウンにリファクタリングされるというニュースを発表したことを知っています。オックス。

Oxc チームは、Oxlint が正式にリリースされたことを正式に発表しました。Oxlint は、将来 ESLint の代替として使用される可能性があります。そのパフォーマンスは、ESLint の「次元削減に直接影響を与え」、評価スコアは ESLint の 50 ～ 100 倍高速です。

たとえば、Shopify は、淘宝網や天猫と同様の越境電子商取引企業であり、Shopify チームは、ESLint を使用したコードの統合には当初 1 時間以上かかったが、現在では Oxlint の統合にわずか 10 秒しかかからないと報告しています。

Yu Da 氏は個人的に、Oxlint が約 600 個のファイルを実行するのにかかる時間は 50 ミリ秒だけで、再実行にはわずか 30 ミリ秒しかかからないと評価しました。最後に与田は「パフォーマンスがすごい！」とコメント。

Vue愛好家

Vueの並列リクエストの最適化

LCP (最大コンテンツ描画) と FCP (最初のコンテンツ描画) は、優れた UX (ユーザーエクスペリエンス) スコアに不可欠な 2 つの主要なパフォーマンス指標です。

この専門家は、Vue でライフサイクルフックの並列リクエストを組み合わせてコンポーネント JS ファイルとデータの並列リクエストを実現し、Web ページの読み込み時間を短縮し、パフォーマンスのボトルネックを最適化する方法に関する科学を普及させました。

Vue3のキャッシュクリア

ブラウザキャッシュは、Web アプリのパフォーマンスを最適化するために使用される強力な最適化テクノロジです。ただし、サーバーがコンテンツを更新すると、ユーザーが古いコンテンツを表示する可能性があります。

この人は、コンポーネントに頼ってキャッシュをクリアする方法を広めましたHandleCache。Vue はキャッシュをクリアすることで、シームレスで最新の UX を提供できます。これは、キャッシュされたファイルのバージョン管理またはコンテンツのハッシュに基づいて実現できますが、次の点に注意する必要がありますキャッシュの更新頻度と動的コンテンツ。

クロスフレームアニメーションライブラリ

AutoAnimate は、Web アプリにスムーズな遷移を追加し、わずか 1 行のコードでアニメーションを実装できる、構成不要のすぐに使えるアニメーションツールライブラリです。

フレームワークに依存しないJSアニメーションライブラリなので、Vue/ReactなどのJSフレームワークと完全連携させることができます。

Vue グラフ作成ライブラリ

Chart.js は、デザイナーと開発者にシンプルで柔軟な JS チャートを提供するツールライブラリです。

Vue に基づいて Chart.js をカプセル化しておりvue-chartjs、これを使用して再利用可能な Vue チャートコンポーネントを簡単に作成できます。

ヌクスト愛好家

Nuxt 3 に移行する 7 つのメリット

SPA開発分野のVue 2はVue 3に、SSR分野のNuxt 2もNuxt 3にバージョンアップしました。

この専門家は、古いプロジェクトを Nuxt 2 から Nuxt 3 に移行することの 7 つの主要な利点を広めました。次のものが含まれますが、これらに限定されません。

パフォーマンスの最適化
DX (開発者エクスペリエンス) の向上
Vue 3 の統合 API の紹介

ヴィート愛好家

[email protected]正式発表アップグレード

Vitest は Vite をネイティブにサポートするテストフレームワークです。人気のある Vue ですら、そのテストライブラリを密かに Vitest に置き換えました。幸いなことに、up の所有者は秘密裏に観察しています。

Vitest チームより 1.0 が正式リリースされたことが正式に発表されました詳細はアップメイントランスレータの公式アップグレード発表と公式ドキュメントの移行ガイドを参照してください。

単体テストに興味がある場合は、以前アップマスターが公開していた収集率最大10%のTDD（テスト駆動開発）入門チュートリアルを独学することができます。

プログラマーの名言

これは「チューリング賞」受賞者であるトニー・ホールの有名な言葉ですが、彼が発明した「クイックソートアルゴリズム」はあなたが書くべきでした。

一般的な考え方は、ソフトウェアアーキテクチャの設計には 2 つの主要な考え方があるということです。

1 つは、明らかに完璧なほど合理化することです。
2 つ目は、明らかな欠陥がないように十分に複雑にすることです。

プログラマーのジョーク

母は私に、なぜ私がそんなに楽しそうに笑っているのかと尋ねました。

しかし、404については文句は言えません。

Vue のヒント: キーボードショートカットの組み合わせ関数を定義する

アプリ内でキーボードショートカットを定義できる便利な Vue コンポーザブル関数を紹介したいと思います。Nuxt UI で見つけたもので、と呼ばれますdefineShortcuts。

それの使い方

まずは使い方を説明します。setup次のように関数でショートカットを定義できます。

ドキュメントを繰り返すつもりはありませんが、いくつかの点を強調させてください。

ショートカットは_文字と組み合わせることができます。たとえば、meta_kこれらはメタキー (MacOSCommandやその他のオペレーティングシステムControl) キーとkキーです。
usingInputユーザーが入力フィールドに入力していない場合にのみショートカットを起動するように複合関数に指示するフラグです。
whenever制約を追加し、制約が満たされた場合にのみショートカットをトリガーするために使用されます。たとえば、を使用すると、の場合whenever: [isActive]にのみショートカットをトリガーできます。isActivetrue