前言
随着项目的越来越庞大,Nuxt.j热更新时间也随着项目的增大,而变长。对于我们这些追求快的家伙怎么能忍?必须整他一波,加快速度。 接下来就从以下方面来加速开发过程中的热更新速度:
- 巧用.nuxtignore
- 加快build速度
配置
1. 巧用.nuxtignore
.nuxtignore文件的主要作用是:让 Nuxt.js 在构建打包阶段忽略项目根目录(rootDir)中的布局(layout),页面(page),store和中间件(middleware)文件。 那么我们就可以巧用.nuxtignore来忽略我们在开发中忽略团队中其他小伙伴开发的页面模块、或者忽略不在开发任务中的模块,以加快热更新速度。 那我们如何使用好.nuxtignore文件呢,以下就是相应的配置教程:
1.1 在项目配置的srcDir目录下新建.nuxtignore文件
如果项目没配置srcDir路径(可以在项目中的nuxt.config.js文件中找到其配置)的话则默认在项目的根目录。如果配置了srcDir路径的话,一定要在相应的目录下创建.nuxtignore文件。
1.2 在.nuxtignore中添加要忽略的模块
文件路径也是以srcDir路径为根路径 其文件格式如下:
# 忽略pages/foo.vue文件
pages/foo.vue
# 忽略pages/路径下所有以-ignore.vue名字结尾的文件
pages/*-ignore.vue
# 忽略pages/bar/文件夹
pages/bar/
其他更多的配置详情请看:zh.nuxtjs.org/docs/2.x/co…
1.3 在.gitignore中添加.nuxtignore(完成)
为了避免影响项目发版以及团队中其他小伙伴的开发,.nuxtignore文件不应该提交到远程仓库。因此需要在.gitignore中添加.nuxtignore,使得其不要提交到远程仓库。
可以在根目录下添加_nuxtignore文件,方便团队中其他小伙伴模仿使用
.gitignore文件添加的内容
# 忽略.nuxtignore文件
.nuxtignore
注意:在本地构建代码发版的时候需要将.nuxtignore删除掉再进行发版,否则会忽略构建.nuxtignore中的文件
2. 加快build速度
2.1 配置cache
增加构建缓存。 在nuxt.config.js中添加如下配置
export default {
build: {
cache: true
}
}
2.2 配置parallel
开启多线程构建项目
export default {
build: {
parallel: true
}
}
扩展
以上有一个问题:在本地构建代码发版的时候需要将.nuxtignore里面的内容注释掉再进行发版,否则会忽略构建.nuxtignore中的文件(也可以在构建之前将他重命名,构建完毕后再将其恢复)。由于我们是统一服务器打包构建,所以这个问题可以忽略。如果有本地构建发布的小伙伴,可以通过nuxt配置中的ignore 属性:www.nuxtjs.cn/api/configu… 根据相应不同的环境去拉取不同的正则配置。即可避免了以上引入.nuxtignore出现的本地构建问题。
还有其他除了nuxt项目,其他项目同理,也可以按照本文中的思路:非本次开发中的功能,在开发环境中忽略其功能,可以大大加快开发中的热更新速度。