Nuxt.js热更新过慢的问题

前言

随着项目的越来越庞大，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项目，其他项目同理，也可以按照本文中的思路：非本次开发中的功能，在开发环境中忽略其功能，可以大大加快开发中的热更新速度。