【M1 chip Mac】Nuxt build is too slow

Viewed 2243

I'm developing environment for Nuxt project on my new M1 chip Machine(Mac). The problem is that the Nuxt project's build speed is too slow.

I installed nodenv into my project, and used v12.9.0. In the project folder, used package maneger(npm / yarn) is in /Users/username/.nodenv/shims/node .

After I run yarn install and yarn dev, the compile(Cliend plus Server) takes about 2 hours.

If I run yarn dev in my Intel Machine(Mac), the build takes only few seconds.

If you have any ideas for steps to isolate the problem, please teach me. Thanks,

【My approaches】

  • remove node_modules and reinstalled them by yarn install.
  • restart my machine
  • simple nuxt project run as the same as on Intel Machine

【environment】

  • M1 chip Machine
  • nodenv (by homebrew)
  • nuxt / vue project

【modules】 my package.json is this,

"dependencies": {
    "@nuxt/typescript-runtime": "^0.4.0",
    "@nuxtjs/axios": "^5.9.5",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/google-gtag": "^1.0.4",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@types/highlight.js": "^9.12.3",
    "@types/quill": "^2.0.3",
    "autolinker": "^3.13.0",
    "blob-util": "^2.0.2",
    "camelcase-keys": "^6.2.1",
    "cross-env": "^7.0.2",
    "crypto-js": "^4.0.0",
    "express": "^4.17.1",
    "highlight.js": "^9.18.1",
    "js-cookie": "^2.2.1",
    "npm-check-updates": "^4.0.6",
    "nuxt": "^2.12.1",
    "nuxt-basic-auth-module": "^1.3.2",
    "nuxt-clipboard2": "^0.2.1",
    "parchment": "^2.0.0-dev.2",
    "pm2": "^4.2.3",
    "quill-image-drop-and-paste": "^1.0.4",
    "sanitize-html": "^1.22.1",
    "snakecase-keys": "^3.1.2",
    "vue-infinite-loading": "^2.4.5",
    "vue-property-decorator": "^8.4.1",
    "vue-sanitize": "^0.2.0",
    "vue-scrollto": "^2.18.1",
    "vue-stripe-elements-plus": "^0.3.2",
    "vue-toc": "0.0.1",
    "vue-tweet-embed": "^2.4.0",
    "vue2-editor": "^2.10.2",
    "vuex-persistedstate": "^3.0.0"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^0.6.0",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.1",
    "@nuxtjs/moment": "^1.6.0",
    "@nuxtjs/vuetify": "^1.11.0",
    "@types/jest": "^25.1.4",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.2.1",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^25.2.1",
    "node-sass": "^4.13.1",
    "nodemon": "^2.0.2",
    "prettier": "^2.2.0",
    "sass-loader": "^8.0.2",
    "ts-jest": "^25.2.1",
    "vue-jest": "^3.0.5"
  }
2 Answers

As expected, there is no actual issue with Nuxt.
yarn dev takes 12s and yarn build (since target: server is the default) takes only around 7s.

You probably have some other issues so far.

enter image description here

I solved this problem by myself.

  1. use version node 16.0.0
  2. if using node-sass, remove it.
  3. instead, install sass and node-loader@7.1.0
  4. yarn install & yarn dev

This works perfectly for me.

Related