nuxtjsã§æ—¥ä»˜ã‚’扱ã†ï¼ˆ@nuxtjs/date-fns） - rochefort's blog
日付ã®formatã‚’ã¡ã‚‡ã‚ã£ã¨å¤‰ãˆãŸã„ã¨æ€ã£ãŸã®ã«ã€ãã‚Œãªã‚Šã«åµŒã£ã¦ã—ã¾ã£ãŸã®ã§ãƒ¡ãƒ¢ã€‚ version nux[email protected] vue@2.6.12 ライブラリ（@nuxtjs/date-fns） jsã£ã¦æ—¥ä»˜ã®æ‰±ã„ãŒå¾®å¦™ã§ã€ãƒ©ã‚¤ãƒ–ラリ使ã†ã®ãŒç„¡é›£ãªã‚“ã§ã™ãŒã€ã‚°ã‚°ã‚‹ã¨momentã®ä¾‹ãŒã„ãã¤ã‹ã‚ã‚Šã¾ã—ãŸã€‚ ã—ã‹ã—ã€momentã¯ã‚‚ã†ãƒ¡ãƒ³ãƒ†ãƒŠãƒ³ã‚¹ãƒ¢ãƒ¼ãƒ‰ã¨ã„ã†æ‰±ã„ã§ã€æ–°ã—ã„プãƒã‚¸ã‚§ã‚¯ãƒˆã§åˆ©ç”¨ã™ã‚‹ã«ã¯æŽ¨å¥¨ã•ã‚Œã¦ã„ã¾ã›ã‚“。 Moment.js | Docs ã„ãã¤ã‹ä»£æ›¿ãƒ©ã‚¤ãƒ–ラリã¯ã‚ã‚‹ã®ã§ã™ãŒã€nuxtjsã§åˆ©ç”¨ã™ã‚‹ã«ã¯ã€ä¸‹è¨˜ãŒä¾¿åˆ©ãã†ã§ã—ãŸã€‚ nuxt-community/date-fns-module: Modern JavaScript date utility library - date-fns for Nuxt.js https://github.com/nuxt-community/
Viteを使ã£ã¦Vueã‚„Nuxtã‚’å‹•ã‹ã—ã¦ã¿ãŸ
ãƒã‚³ã‚¶ã‚ã§ã™ã€‚ 今回ã¯é«˜é€Ÿãªãƒ“ルドツールã¨ã—ã¦è©±é¡Œã®Viteを使ã£ã¦Nuxtã‚’å‹•ã‹ã—ã¦ã¿ãŸã„ã¨æ€ã„ã¾ã™ï¼ Viteã¨ã¯ Vite（ヴィート）ã¯VueJSã®é–‹ç™ºè€…ã§ã‚ã‚‹Evan Youæ°ãŒé–‹ç™ºã—ãŸãƒŽãƒ¼ãƒãƒ³ãƒ‰ãƒ«ãªãƒ“ルドツールã§ã™ã€‚ Reactã‚„Svelteãªã©ã«ã‚‚サãƒãƒ¼ãƒˆã—ã¦ãŠã‚Šã€ より速ã・より無駄ã®ãªã„開発環境をæä¾›ã™ã‚‹ã“ã¨ã‚’目的ã¨ã—ã¦ã¾ã™ã€‚ モダンブラウザã«ã¯å¯¾å¿œã—ã¦ã¾ã™ãŒã€ IE11ãªã©ã®ãƒ¬ã‚¬ã‚·ãƒ¼ãªãƒ–ラウザã«ã‚‚対応ã•ã›ã‚‹ã«ã¯åˆ¥é€” @vitejs/plugin-legacyを入れる必è¦ãŒã‚ã‚Šã¾ã™ã€‚ 2021å¹´7月時点ã§å…¬å¼ã‚µã‚¤ãƒˆãŒæ—¥æœ¬èªžå¯¾å¿œã•ã‚ŒãŸã¨ã®ã“ã¨ã§ã€ ã‹ãªã‚Šã‚¢ãƒ„ã„ビルドツールã¨ãªã£ã¦ãŠã‚Šã¾ã™ã€‚ Node.jsã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ãŒ12以é™ã§ã‚ã‚Œã°Viteã‚’å‹•ã‹ã™ã“ã¨ãŒã§ãã‚‹ãŸã‚〠今回ã¯14.8.0ã§å®Ÿè¡Œã—ã¦ãŠã‚Šã¾ã™ã€‚ ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã®åˆ‡ã‚Šæ›¿ãˆã¯nodenvãªã©ã‚’用ã„ã¦ã¿ã¦ãã ã•ã„。 Vue
Nuxt.jsã®ãƒ“ルドを高速化ã—ã¦ã¿ã‚‹ - ContractS開発者ブãƒã‚°
ã“ã‚“ã«ã¡ã¯ã€‚Holmesã§ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’ã—ã¦ã„る三澤ã§ã™ã€‚ 背景 弊社ã§ã¯ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãƒ•ãƒ¬ãƒ¼ãƒ ワークã¨ã—ã¦Nuxt.jsを利用ã—ã¦ã„ã¾ã™ã€‚プãƒã‚¸ã‚§ã‚¯ãƒˆãŒé€²ã¿ã‚³ãƒ¼ãƒ‰ãŒå¢—ãˆã¦ãã‚‹ã¨ãƒ“ルドã«æ™‚é–“ãŒã‹ã‹ã£ã¦ãã‚‹ã®ãŒæ‚©ã¿ã®ç¨®ã§ã™ã€‚ ビルド時ã«æœ€ã‚‚時間ãŒã‹ã‹ã£ã¦ã„ã‚‹ã®ã¯ä¸‹è¨˜ã®ç”»åƒã®éƒ¨åˆ†ã§ã™ãŒã€æらãwebpackã®ãƒ“ルドã«æœ€ã‚‚時間ãŒã‹ã‹ã£ã¦ã„ã‚‹ã®ã§ã¯ãªã„ã‹ã¨ä»®å®šã—ã¾ã—ãŸã€‚ ã“ã®ä»®å®šã«åŸºã¥ã„ã¦ä½•ã‹ã„ã„方法ã¯ãªã„ã‹ã¨æŽ¢ã—ã¦ã„ã‚‹ã¨Nuxt.js本家ã®Github上ã§èˆˆå‘³æ·±ã„issueを見ã¤ã‘ã¾ã—ãŸã€‚ github.com ã“ã“ã§Nuxtã®ä¸ã®äººãŒã“ã®ã‚ˆã†ãªã“ã¨ã‚’言ã£ã¦ã„ã¾ã—ãŸã€‚ 今回ã¯ä¸Šè¨˜ã®ã‚³ãƒ¡ãƒ³ãƒˆã§å–り上ã’られã¦ã„る方法を試ã—ã¦Nuxt.jsã®ãƒ“ルド高速化(=webpackã®ãƒ“ルド高速化)ã«å–り組んã§ã¿ãŸã„ã¨æ€ã„ã¾ã™ã€‚ 背景 æ¦‚è¦ å®Ÿè¡Œçµæžœ 何もã—ã¦ã„ãªã„å ´åˆ parallelプãƒãƒ‘ティ cacheプãƒãƒ‘
vue-observe-visibilityを使ã£ã¦ç”»é¢å†…ã®ã¨ãã ã‘表示ã™ã‚‹ - ãらã’ã«ãªã‚ŠãŸã„。
ç”»é¢å¤–ã®ã¨ãã¯æç”»ã—ãªã„よã†ã«ã—ã€ç„¡é™ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°æ™‚ã®æ€§èƒ½æ”¹å–„ã—ãŸã¨ãã®å‚™å¿˜éŒ²ã€‚ vue-observe-visibilityを使ã£ã¦ã€ç”»é¢å†…ã‹ã‚’検知ã—ã¦è¡¨ç¤ºã‚’切り替ãˆã¦ã¿ãŸã€‚ インストール ã¾ãšã¯ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã€‚ $ npm install --save vue-observe-visibility # IEãªã©Intersection Observer APIã«å¯¾å¿œã—ã¦ãªã„ブラウザ用ã®polyfill $ npm install --save intersection-observer プラグインã®ä½œæˆ plugins/observe-visibility.tsã‚’ä½œæˆ // polyfillã¯æœ€åˆã«èªã¿è¾¼ã‚€ require('intersection-observer'); import Vue from "vue"; import VueObserveVisibility from "
Create a Blog with Nuxt Content
Create a Blog with Nuxt Content The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.
nuxt/content ã®ãƒ–ãƒã‚°ã‚’ full-static ã«ã™ã‚‹
nuxt/content ã§ãƒ–ãƒã‚°ã‚’作ã£ã¦ããŸãŒã€ Lighthouse (ã‚ã‚‹ã„㯠PageSpeed Insight) ã§ã®è¨ˆæ¸¬ã«ãŠã„㦠Performance ㌠80 点å‰å¾Œã‹ã‚‰å‘上ã•ã›ã‚‰ã‚Œã¦ã„ãªã‹ã£ãŸã€‚ TTB (Total Blocking Time) ã®é …ç›®ãŒæ‚ªã〠JavaScript ã®ãƒãƒ¼ãƒ‰ã«æ™‚é–“ãŒã‹ã‹ã£ã¦ã„るらã—ã„ã“ã¨ã¯ã‚ã‹ã£ãŸã®ã ãŒã€ã“ã‚Œã«å¯¾å‡¦ã™ã‚‹ã“ã¨ã§ Performance 100 点ã¾ã§ä¸Šã’ã‚‹ã“ã¨ãŒã§ããŸã€‚ JavaScript ã® inject を無効ã«ã™ã‚‹ nuxt.config.js 㧠build.analyze ã‚’ true ã«ã—ã¦ãƒ•ã‚¡ã‚¤ãƒ«ã®å¤§ãã•ã‚’確èªã—ã¦ã¿ãŸã‚Šã‚‚ã—ãŸã®ã ãŒã€ç‰¹ã«å‰Šæ¸›ã§ããã†ãªã‚‚ã®ãŒè¦‹å½“ãŸã‚‰ãªã„。 Nuxt.js ã® static ビルドã«ãŠã„ã¦ãã†ã„ã£ãŸå•é¡ŒãŒã‚ã‚‹ã®ã‹ã©ã†ã‹æŽ¢ã—ã¦ã„ãŸã¨ã“ã‚ã€ä»¥ä¸‹ã®ã‚ˆã†ãª issue を見ã¤ã‘ãŸã€‚
Web Vitals, Google Search & the State Vue & Nuxt performance optimization in July 2020
As google recently announced their new guidelines for Web Vitals as an update of their existing Lighthouse KPIs, a lot of discussion on how to to optimize against these values has come up. I wanted to document some of the best practices that I ended up using. As a disclaimer, if your goal is to reach a performance score ≥ 85 with a tool like web.dev or pagespeed insights, any kind of client side h
Nuxtã«ã‚‚@nuxt/imageãŒã‚ã£ãŸã®ã§ä½¿ã£ã¦ã¿ãŸ
先日ã€ä»¥ä¸‹ã®è¨˜äº‹ã‚’書ã‹ã›ã¦ã‚‚らã£ãŸã®ã§ã™ãŒ React(Next.js)ã«ã‚ã£ã¦Vue(Nuxt.js)ãªã„ã¨ã„ã†ã®ãŒã‚ã‚Šã€Vue(Nuxt.js)ã«ã“ã‚Œã‚ã£ãŸã‚‰ã„ã„ã®ã«ãªãƒ¼ã€ã¨ã„ã†ã®ãŒã‚ã£ãŸã‚ã‘ã§ã™ã€‚ ãã‚Œã¯ç”»åƒæœ€é©åŒ–モジュールã§ã™ã€‚ ç”»åƒæœ€é©åŒ–モジュールã¨ã¯ï¼Ÿ webサイトã«ä½¿ç”¨ã•ã‚Œã‚‹ç”»åƒã¯ã€å®Ÿè³ª1æžšã«è¦‹ãˆã¾ã™ãŒã€é€šå¸¸ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯åŒã˜webサイトをã€PCã‹ã‚‰ã€ã‚¿ãƒ–レットã‹ã‚‰ã€ã‚¹ãƒžãƒ›ã‹ã‚‰é–²è¦§ã—ã¾ã™ã€‚ã¾ãŸã€ã“れら閲覧ã™ã‚‹ç’°å¢ƒã«ã‚ˆã‚Šã€è§£åƒåº¦ãŒé«˜ã„ã‚‚ã®ã‚‚ã‚ã‚Šã€ãã®å ´åˆã€é€šå¸¸ã®2å€ã‚µã‚¤ã‚ºã®ç”»åƒã‚’表示ã—ã¦ã‚ã’ãªã„ã¨ãƒœãƒ¤ã‘ã‚‹ç‰ã®ä»•æ§˜ãŒã‚ã‚Šã¾ã™ã€‚ ãªã®ã§ã€ä»¥ä¸‹ã®ã‚ˆã†ã«ã„ã‚ã‚“ãªæŒ‡å®šã®ä»•æ–¹ã§è¨˜è¿°ã—ãªã‘ã‚Œã°ãªã‚Šã¾ã›ã‚“。(ã¡ã‚ƒã‚“ã¨ã‚„ã‚ã†ã¨ã™ã‚‹ã¨) <picture class="imgWrapper"> <source media="(min-width:1200px)" srcset=" /images/te
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
https://blog.yukii.work/posts/2022-05-21-why-nuxt-speedkit-scores-so-well/
My web performance journey with Nuxt, Storyblok & Netlify
ã€Nuxt】nuxt-optimized-imagesã§ç”»åƒåœ§ç¸®ã‚’自動化ã™ã‚‹
{{#tags}}- {{label}}
{{/tags}}