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
属性来预加载某个图片。
转载自:https://juejin.cn/post/7226994337124007994