关于SSR模式Nuxt应用生成的/_nuxt/目录下JS文件的相关问题

Nuxt SSR 生成JS文件相关问题解答 #

你提供的页面资源引用代码如下：

<script src="/_nuxt/runtime.js" defer></script>
<script src="/_nuxt/pages/index.js" defer></script>
<script src="/_nuxt/commons/app.js" defer></script>
<script src="/_nuxt/vendors/app.js" defer></script>
<script src="/_nuxt/app.js" defer></script>

1. 生成的JS文件本地存储位置

分两种运行场景区分：

• 开发模式（执行nuxt dev启动服务）：构建产物直接存储在内存中，不会写入本地磁盘，项目目录下找不到对应实体文件
• 生产构建模式（执行nuxt build打包）：所有客户端构建产物默认存放在项目根目录的.nuxt/dist/client/文件夹中，部署后该目录资源会映射为站点/_nuxt/路径下的可访问资源

2. /_nuxt/pages/index.js是否每次页面加载时从头构建

不会，分模式逻辑如下：

• 开发模式下：只有你修改了首页对应的源码文件时，Nuxt的热重载模块才会增量重新构建该文件，无代码变动时直接返回内存中已构建完成的文件，不会每次页面加载都从头构建
• 生产模式下：所有JS/CSS资源都会在nuxt build执行阶段一次性预构建完成，服务运行过程中不会再触发构建逻辑，页面加载时直接返回预生成的静态文件即可
  补充说明：nuxt.config.js仅负责提供构建和运行的配置参数，本身不直接执行文件构建逻辑，构建流程由Nuxt内部的打包管道处理。

3. Nuxt是否采用代码分割拆分页面所需资源

是的，Nuxt默认开启基于路由的自动代码分割能力，会根据页面依赖自动拆分JS/CSS资源：

• 每个页面对应独立的代码块，比如上面代码里的pages/index.js就是首页专属的代码块，用户访问其他页面时不会加载该文件
• 公共依赖会被单独拆分：代码里的vendors/app.js是项目用到的第三方公共依赖（比如Vue、Nuxt核心包等），commons/app.js是多个页面复用的公共业务代码，runtime.js是打包工具的运行时代码，app.js是全局应用入口代码
  这种拆分逻辑可以大幅降低页面首次加载的资源体积，提升加载速度。

内容的提问来源于stack exchange，提问作者robskrob