Nuxt.js项目优化实践

前言

前段时间接手的nuxt.js项目，开发时发现项目启动时间长达5分钟左右，非常影响开发效率，于是经过一番研究，找出了几点可优化的项。

经过优化后，项目启动时间提升到了30s左右，以下是我的优化步骤。

优化构建速度

优化前：本地开发构建3min左右（不知道是不是后来升级了nuxt版本的原因，感觉比最开始还快了点）。

build开启缓存

参照nuxt.js官方文档，在nuxt.config.js配置文件build选项下，启用缓存。

首先是添加cache配置项：

build: {
  cache: true
}

设置后，即为启用webpack的terser-webpack-plugin 和 cache-loader，来压缩JS和缓存其他loaders的处理结果。

构建速度提升：2.6min -> 2.0min，提升约23%。

再添加hardsource配置项：

build: {
  cache: true,
  hardSource: true
}

设置后，即为开启hard-source-webpack-plugin插件。

注：该插件可能会在控制台打印错误信息，类似于：

Could not freeze...: Cannot read properties of undefined (reading 'hash')

出现此情况，可以尝试清除node_modules/.cache/hard-source文件夹。

构建速度提升（从第二次重新启动开始生效）：2.0min -> 50s左右，速度提升能达到50%左右。

使用.nuxtignore忽略暂不使用的文件

.nuxtignore文件让Nuxt.js在构建打包阶段忽略项目中的某些文件，与.gitignore文件的规范相同。

分析项目代码结构，由于一些原因，其中有相当一部分页面文件是没有用到的，且具有一定的文件命名特征， 于是考虑在nuxtignore配置文件中，使用正则表达式，对这些文件批量进行忽略，

pages/commonPrefix*

忽略后，可以尝试手动输入某个被忽略的页面路由，如果显示404，则配置成功。

构建速度提升：大概能提升个10秒钟左右。

最终优化效果

开发环境项目启动时间，由3min左右，提升至30s左右。

提取业务组件，减少无意义的路由注册

除了以上优化，我还发现，在项目中pages文件下，除了每个页面文件外，还存在大量的业务组件，造成了过多的路由自动注册， 解决方案，在components文件夹下，创建bussiness文件夹，将可公用的业务组件提取至该文件夹下，避免与基础组件混杂。

优化页面加载

减少全局引用，按需引用页面需要的依赖

如果仅在个别页面用到某些依赖，那么可以使用按需引入的方式，来代替全局引用。

使用nuxt.js实现服务端渲染的应用，每个页面都会单独加载一次资源，如果在全局范围引入的资源过多，就会在一定程度上增加某些页面的加载时间，

采用按需加载的方式，可以避免页面因加载未使用的资源而消耗更多时间。

精简服务端接口调用，添加骨架屏或loading作为过渡

虽然使用nuxt.js更多的是为了做到服务端渲染一部分页面内容，但这也可能造成一些页面交互体验不佳，

比如：服务端调用接口期间，用户需要等待接口调用完成返回后才能看到页面内容，这往往需要一定的时间，

使用lighthouse进行分析时，也可以看到Reduce initial server response time这样的建议。

解决方案：

• 在asyncData中仅保留必要的接口调用，多个接口尽可能并行调用，
• 与接口提供方沟通，协调优化接口响应速度。

使用nuxt/image优化图片加载

使用lighthouse分析页面加载时间，根据给出的建议，可以考虑使用nuxt/image，通过使用组件，并添加对应的属性配置， 例如：设置preload属性来预加载某个图片。