首页 > 解决方案 > 基于语言环境的 Nuxt 构建速度极慢

问题描述

我有一个基于 Nuxt 的应用程序。埃斯林特也包括在内。当我需要重建应用程序时,大约需要 10 分钟。我不明白。有人告诉我我的笔记本电脑很慢。它的参数是i5、8G ram、500G SSD、Win10。我能做些什么来加快构建速度?

PS 是否可以禁用 EsLint 进行开发?

这是 nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "lurity",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },
  server: {
    port: process.env.PORT, // default: 3000
    host: process.env.HOST, // default: localhost
  },
  modern: true,
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    "@mdi/font/css/materialdesignicons.css",
    "@/assets/scss/bulma_styled.scss",
    "@/assets/scss/lurity.scss",
  ],
  router: {
    middleware: "auth",
  },
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "~/plugins/helpers.js",
    "~/plugins/apiCalls.js",
    "~/plugins/vue-lazyload.client.js",
    { src: "~/plugins/vue-intersect.client.js", mode: "client" },
    { src: "~/plugins/gmaps.client.js", mode: "client" },
    { src: "~/plugins/google-auth.client.js", mode: "client" },
    { src: "~/plugins/google-tag-manager.client.js", mode: "client" },
    { src: "~/plugins/debounce.client.js", mode: "client" },
    { src: "~/plugins/braintree.client.js", mode: "client" },
    { src: "~/plugins/charts.client.js", mode: "client" },
    { src: "~/plugins/vuex-persist.client.js", mode: "client" },
    { src: "~plugins/leaflet.client.js", mode: "client" },
    { src: "~plugins/nuxt-client-init.client.js", mode: "client" },
    "~/plugins/map-location.js",
        "~/plugins/notify.js"
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    "@nuxtjs/eslint-module",
    "@nuxtjs/composition-api/module",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/buefy
    "nuxt-buefy",
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
    "@nuxtjs/proxy",
    [
      "nuxt-i18n",
      {
        locales: [
          {
            code: "en",
            iso: "en-GB",
            file: "en_locale.js",
          },
          {
            code: "sk",
            iso: "sk-SK",
            file: "sk_locale.js",
          },
          {
            code: "cz",
            iso: "cs-CZ",
            file: "cs_locale.js",
          },
        ],
        defaultLocale: "en",
        strategy: "no_prefix",
        lazy: true,
        vueI18n: {
          silentTranslationWarn: true,
          silentFallbackWarn: true,
        },
        langDir: "locales/",
        // Enable browser language detection to automatically redirect user
        // to their preferred language as they visit your app for the first time
        // Set to false to disable
        detectBrowserLanguage: {
          // If enabled, a cookie is set once a user has been redirected to his
          // preferred language to prevent subsequent redirections
          // Set to false to redirect every time
          useCookie: true,
          // Cookie name
          cookieKey: "i18n_redirected",
          // Set to always redirect to value stored in the cookie, not just once
          alwaysRedirect: false,
          // If no locale for the browsers locale is a match, use this one as a fallback
          fallbackLocale: "en",
        },
      },
    ],
  ],
  buefy: { css: false, materialDesignIcons: false, defaultLocale: "sk-SK" },
  proxy: {
    // Simple proxy
    "/api": {
      target:
        process.env.PROXY || (process.env.NODE_ENV === "production"
          ? "https://portal-api.lurity.com"
          : "https://portaldev-api.lurity.com"),
    },
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["vuex-stores"],
    loaders: {
      scss: {
        sourceMap: true,
        implementation: require("sass"),
        additionalData: `@import "~@/assets/scss/_bulma_variables.scss"; @import "~@/assets/scss/variables.scss";`,
      },
    },
  },
};

这是 yarn nuxt build --analyze 的结果 在此处输入图像描述

标签: performancebuildnuxt.jseslint

解决方案


nuxt.config.js就配置( )而言,这里并没有什么真正令人震惊的地方。
所以我想这取决于你构建时机器上运行的内容。另外,我不确定在 Windows 中构建是否较慢,但这也可能是一个原因。

您可能可以询问朋友或将 github 链接分享给具有更强大硬件配置的人来诊断构建速度。

我确实在我的装备中运行以下内容:

  • 最新的 LTS ubuntu ( 20.04)
  • 2x 32GB DDR4 4000MHz 三叉戟 Z 皇家 CAS 18
  • 锐龙 R9 5950x @stock
  • 2TB 三星 Pro NVME

根据我的经验,主要帮助的是大量 RAM(数量)+ 速度以适应您的 CPU。然后,这一切都归结为 Webpack 设置或其他与 IMO 相关的构建工具设置。


最后,没有准确的数字,这个问题有点难以回答。
另一件事,可能是查看实际构建并尝试用自己的眼睛找出慢的地方,它会缩小你的问题 IMO。


推荐阅读