初始Next.js

版本:

本系列next.js基于的是目前最新版本的 v14 版本,需要 Node.js 18.17 及以后版本

创建项目:

最快捷的创建 Next.js 项目的方式是使用 create-next-app脚手架,你只需要运行:

npx create-next-app@latest&&pnpm create next-app&&yarn create next-app

文件目录及其启动命令

开发的时候使用 npm run dev

部署的时候先使用 npm run build 构建生产代码,再执行 npm run start 运行生产项目。

运行 npm run lint 则会执行 ESLint 语法检查。

执行 next build 将会创建项目的生产优化版本:输出如下

从上图可以看出,构建时会输出每条路由的信息,比如 Size 和 First Load JS。注意这些值指的都是 gzip 压缩后的大小。其中 First Load JS 会用绿色、黄色、红色表示,绿色表示高性能,黄色或红色表示需要优化。

这里要解释一下 Size 和 First Load JS 的含义。正常我们开发的 Next.js 项目,其页面表现类似于单页应用,即路由跳转(我们称之为“导航”)的时候,页面不会刷新,而会加载目标路由所需的资源然后展示,所以:

加载目标路由一共所需的 JS 大小 = 每个路由都需要依赖的 JS 大小 + 目标路由单独依赖的 JS 大小

其中:

  • 加载目标路由一共所需的 JS 大小就是 First Load JS
  • 目标路由单独依赖的 JS 大小就是 Size
  • 每个路由都需要依赖的 JS 大小就是图中单独列出来的 First load JS shared by all

First Load JS = Size + First load JS shared by all

使用官方文档中的介绍就是:

  • Size:导航到该路由时下载的资源大小,每个路由的大小只包括它自己的依赖项
  • First Load JS:加载该页面时下载的资源大小
  • First load JS shared by all:所有路由共享的 JS 大小会被单独列出来

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/824470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++题解】1565. 成绩(score)

问题:1565. 成绩(score) 类型:基本运算、小数运算 题目描述: 牛牛最近学习了 C 入门课程,这门课程的总成绩计算方法是: 总成绩作业成绩 20% 小测成绩 30% 期末考试成绩 50%。 牛牛想知道&am…

04-15 周一 GitHub仓库CI服务器actions-runner和workflow yaml配置文档解析

04-15 周一 GitHub仓库CI服务器配置过程文档 时间版本修改人描述2024年4月15日10:35:52V0.1宋全恒新建文档2024年4月17日10:33:20v1.0宋全恒完成github actions CI的配置和工作流配置文件解读文档的撰写 简介 一些基础概念 前提知识 仓库介绍 地址镜像介绍https://github.…

GIT上超火的阿里内部1000页Java核心笔记,啃完竟然拿到阿里P7offer!

除了ReetrantLock,你还接触过JUC中的哪些并发工具? 请谈谈ReadWriteLock 和StampedLock。 如何让Java的线程彼此同步?你了解过哪些同步器?请分别介绍下。 CyclicBarrier和CountDownLatch看起来很相似,请对比下呢&am…

Django中的数据库优化与ORM性能调优【第169篇—ORM性能调优】

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Django中的数据库优化与ORM性能调优 在开发基于Django的Web应用程序时,数据库是…

让一个元素在网页上跟随网页窗口大小变化始终保持上下左右居中

废话少说&#xff0c;直接上代码&#xff0c;懂的都懂&#xff1a; <!DOCTYPE html> <html style"font-size: 100px;"> <head><meta http-equiv"Content-Type" content"text/html;charsetUTF-8"><style type"te…

CTFHUB-技能树-Web前置技能-文件上传(前端验证—文件头检查)

CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—文件头检查&#xff09; 文章目录 CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—文件头检查&#xff09;前端验证—文件头检查题目解析 各种文件头标志 前端验证—文件头检查 题目考的是&#xff1a;pn…

Spring之CGLIB和JDK动态代理底层实现

目录 CGLIB 使用示例-支持创建代理对象&#xff0c;执行代理逻辑 使用示例-多个方法&#xff0c;走不同的代理逻辑 JDK动态代理 使用示例-支持创建代理对象&#xff0c;执行代理逻辑 Spring会自动在JDK动态代理和CGLIB之间转换: 1、如果目标对象实现了接口&#xff0c;默…

【计组】计算机系统概述

文章目录 前言正文计算机的发展历程什么是计算机系统硬件的发展历程软件的发展 计算机硬件的基本组成冯诺依曼体系结构(存储程序型电脑)现代计算机的结构 各硬件的工作原理主存储器的基本组成运算器的基本组成控制器的基本组成计算机的工作过程 计算机系统的层次结构计算机的性…

AWS Key disabler:AWS IAM用户访问密钥安全保护工具

关于AWS Key disabler AWS Key disabler是一款功能强大的AWS IAM用户访问密钥安全保护工具&#xff0c;该工具可以通过设置一个时间定量来禁用AWS IAM用户访问密钥&#xff0c;以此来降低旧访问密钥所带来的安全风险。 工具运行流程 AWS Key disabler本质上是一个Lambda函数&…

Go 语言中的 GIF 图像处理完全指南:`image/gif`的技术与实践

Go 语言中的 GIF 图像处理完全指南&#xff1a;image/gif的技术与实践 概述安装与基础设置导入 image/gif 包初步配置示例&#xff1a;设置一个简单的 GIF 编码环境 读取与解码 GIF 图像读取 GIF 文件解析 GIF 数据 创建与编码 GIF 图像创建 GIF 图像编码 GIF 图像 处理 GIF 动…

书生·浦语大模型实战训练营第二期第四节--Xtuner微调LLM--notebook

XTuner微调LLM课程笔记 一、Finetune简介 1.为什么模型要做微调&#xff1f; 现在其实大部分的大模型应该叫做“基座模型”&#xff0c;也就是基于普遍性的任务去进行与训练的&#xff0c;所以如果想让它落地在特定的下游领域中&#xff0c;它的表现必然是不如在领域内训练的模…

【devops】 阿里云挂载云盘 | 扩展系统硬盘 | 不重启服务器增加硬盘容量

扩容分区和文件系统&#xff08;Linux&#xff09; 文档地址 https://help.aliyun.com/zh/ecs/user-guide/extend-the-partitions-and-file-systems-of-disks-on-a-linux-instance?spm5176.smartservice_service_robot_chat_new.help.dexternal.4ac4f625Ol66kL#50541782adxmp…

Go 之 sync.Mutex 加锁失效现象

我先声明一下&#xff0c;并不是真的加锁失效&#xff0c;而是我之前的理解有误&#xff0c;导致看起来像是加锁失效一样。于是乎记录一下&#xff0c;加深一下印象。 我之前有个理解误区&#xff08;不知道大家有没有&#xff0c;有的话赶紧纠正一下——其实也是因为我这块的…

【在线OJ系统】自定义注解实现分布式ID无感自增

实现思路 首先自定义参数注解&#xff0c;然后根据AOP思想&#xff0c;找到该注解作用的切点&#xff0c;也就是mapper层对于mapper层的接口在执行前都会执行该aop操作&#xff1a;获取到对于的方法对象&#xff0c;根据方法对象获取参数列表&#xff0c;根据参数列表判断某个…

html接入高德地图

1.申请key key申请地址&#xff1a;https://console.amap.com/dev/key/app 官方文档 https://lbs.amap.com/api/javascript-api-v2/summary 2.html接入示例 需要将YOUR_KEY替换成自己的key <!doctype html> <html> <head><meta charset"utf-…

IDEA 安装、基本使用、创建项目

文章目录 下载基本使用修改颜色主题Keymap插件 创建项目创建模块新建 Java 类运行新建 Package打包 Jar运行 jar 包 查看文档 下载 官方下载地址&#xff1a;https://www.jetbrains.com/zh-cn/idea/download/?sectionmac 这里我下载 macOS 社区版&#xff0c;IDEA 2024.1 (C…

arcgis中坡向计算工作原理说明

用于识别出从每个像元到其相邻像元方向上值的变化率最大的下坡方向。坡向可以被视为坡度方向。输出栅格中各像元的值可指示出各像元位置处表面的朝向的罗盘方向。将按照顺时针方向进行测量&#xff0c;角度范围介于 0&#xff08;正北&#xff09;到 360&#xff08;仍是正北&a…

Windows 安装 A UDP/TCP Assistant 网络调试助手

Windows 安装 A UDP/TCP Assistant 网络调试助手 0. 引言1. 下载地址2. 安装和使用 0. 引言 需要调试一个实时在线聊天程序&#xff0c;安装一个UDP/TCP Assistant 网络调试助手&#xff0c;方便调试。 1. 下载地址 https://github.com/busyluo/NetAssistant/releases 2. 安…

Jsp 中的getServletContext全局数据共享

servletContext作用于不同用户之上 1. 一个用户将数据保存到了servletContext中, // getcontext的servlet程序 Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ServletContext context this.get…

考察自动化立体库应注意的几点

导语 大家好&#xff0c;我是智能仓储物流技术研习社的社长&#xff0c;老K。专注分享智能仓储物流技术、智能制造等内容。 整版PPT和更多学习资料&#xff0c;请球友到知识星球 【智能仓储物流技术研习社】自行下载 考察自动化立体仓库的关键因素&#xff1a; 仓库容量&#x…