Tailwindcss-module: بناء nuxt بطيء! ماذا علي أن أفعل؟

تم إنشاؤها على ٢٣ أكتوبر ٢٠٢٠ · 5تعليقات · مصدر: nuxt-community/tailwindcss-module

بدون Tailwindcss

✔ Client
  Compiled successfully in 2.12m

✔ Server
  Compiled successfully in 1.72m


Hash: 36fc5cf6354758073391
Version: webpack 4.44.1
Time: 127192ms

مع Tailwindcss

✔ Client
  Compiled successfully in 26.23s

✔ Server
  Compiled successfully in 7.20s


Hash: 2a16c82743dd11e56513
Version: webpack 4.44.1
Time: 26232ms

Tailwindcss المغلق

<strong i="12">@import</strong> 'tailwindcss/base';
<strong i="13">@import</strong> 'tailwindcss/components';
<strong i="14">@import</strong> 'tailwindcss/utilities';

tailwindcss config js

const extend = {
  spacing: [-10, 200],
  inset: [0, 100],
  colors: {
    red: {
      default: '#FF3C3C',
      FFEEEE: '#FFEEEE',
    },
    blue: {
      default: '#5572FD',
      E8ECFF: '#E8ECFF',
    },
    green: '#50B349',
    yellow: {
      default: '#FF9807',
      FDC31F: '#FDC31F',
      FEF3E5: '#FEF3E5',
      FFE9D6: '#FFE9D6',
      FFEACC: '#FFEACC',
    },
    gray: {
      default: '#989898',
      656565: '#656565',
      F2F2F2: '#F2F2F2',
      E5E5E5: '#E5E5E5',
    },
  },
}

function expandThemeByPx (array) {
  const expand = {}
  const [start, end] = array
  let current = start
  while (current <= end) {
    expand[current] = `${current}px`
    current++
  }
  return expand
}

module.exports = {
  // important: true,
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
    defaultLineHeights: true,
    standardFontWeights: true,
  },
  theme: {
    extend: {
      spacing: expandThemeByPx(extend.spacing),
      inset: expandThemeByPx(extend.inset),
      colors: extend.colors,
    },
    fill: extend.colors,
  },
  variants: {},
  plugins: [],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'src/components/**/*.vue',
      'src/layouts/**/*.vue',
      'src/pages/**/*.vue',
      'src/utils/common.js',
    ]
  }
}

nuxt config js

{
tailwindcss: {
    configPath: '~~/tailwind.config.js',
  },
}

مساعدة مساعدة

pending

مصدر

Yee1014

👍3

التعليق الأكثر فائدة

لقد وجدت أيضًا بعض مشكلات الأداء أثناء الترحيل من Tailwind 1.x إلى 2.x في حالتي ، كان الأمر متعلقًا باستخدام مكونات داخلية @apply .

لقد أنشأت هذه المشكلة في Tailwind repo https://github.com/tailwindlabs/tailwindcss/issues/3717 والعلاقات العامة التالية https://github.com/tailwindlabs/tailwindcss/pull/3718 . أنا في انتظار ردود فعل فريق Tailwind

axelhzf في ٩ مارس ٢٠٢١

👍2

ال 5 كومينتر

لدي نفس المشكلة.

ستكون هناك شاشة بيضاء عند التمرير في صفحة الويب في رحلات السفاري.

package.json

"dependencies": {
  "nuxt": "^2.14.5",
},
"devDependencies": {
  "@nuxtjs/tailwindcss": "^3.0.2",
}

nuxt.config.js

buildModules  buildModules: [
    '@nuxtjs/tailwindcss',
  ],

Tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
  theme: {
    maxHeight: {
      16: '4rem',
    },
    borderWidth: {
      default: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
    extend: {
      colors: {
        primary: {
          light: '#ffd943',
          default: '#ffb01c',
        },
        secondary: {
          light: '#ffe3d7',
          default: '#ff6d2d',
          dark: '#99411b',
        },
        customGray: {
          100: '#faf9f5',
          200: '#f0f0f0',
          300: '#ebebeb',
          400: '#dcdcdc',
          500: '#b4b4b4',
          600: '#969696',
          700: '#615a50',
        },
        customBlue: {
          dark: '#36568d',
          light: '#798fa7',
        },
        customPink: {
          default: '#eaac9d',
        },
        customBlack: {
          default: '#1e1e1e',
        },
        customYellow: {
          light: '#fdf6e9',
          default: '#b49d73',
        },
      },
      height: {
        90: '90px',
        100: '100px',
        110: '110px',
        150: '150px',
      },
      inset: {
        '-2': '-0.5rem',
        25: '25%',
        50: '50%',
        75: '75%',
        100: '100%',
        '-50': '-50%',
        '-100': '-100%',
      },
      zIndex: {
        '-10': '-10',
        100: '100',
      },
      boxShadow: {
        10: '0 0 10px rgba(0, 0, 0, 0.05)',
      },
    },
  },
  variants: {},
  plugins: [],
}

يمكن حلها بهذه الطريقة
لكن لا يبدو أنه الحل الأفضل.

one-liang في ٢٦ أكتوبر ٢٠٢٠

👎1

نحن على علم بهذه المشكلة وهي مرتبطة ارتباطًا مباشرًا بـ TailwindCSS: https://github.com/tailwindlabs/tailwindcss/issues/2544

نحن نفكر بالفعل في طريقة لتسريع بناء التطوير واستبدال الوحدة النمطية الساخنة ، وستكون الفكرة هي إنشاء CSS يدويًا باستخدام Tailwind config و PostCSS عند تحميل الوحدة ، ثم حقن CSS مرة واحدة لتجاوز المكون الإضافي PostCSS لـ Tailwind ، ولكن قد يكون لها آثار جانبية.

Atinux في ٢ نوفمبر ٢٠٢٠

فقط للتناغم - أليست هذه أيضًا حالة يمكن أن يساعد فيها فصل استيراد Tailwindcss عن ملف tailwind.css؟ وفقًا لـ https://nystudio107.com/blog/speeding-up-tailwind-css-builds (المذكورة في المشكلة التي ربطتها من قبل) من شأنه أن يقترح أن تقسيم الواردات إلى نقاط دخول منفصلة سيسرع إعادة التجميع عند التغيير. لا أعرف كيف يعمل في الأسفل ، لكن يمكنني أن أتخيل أن cssPath سيكون بمثابة مصفوفة لـ tailwindcss / base tailwindcss / utils وما إلى ذلك وإدخال منفصل لـ tailwind.css الذي لن يستوردها. عندئذٍ ، سيؤدي كل تغيير في الفئات المخصصة إلى إعادة تجميع الفئات المخصصة فقط وليس أنظمة التشغيل الخلفية بأكملها. هل هذا ممكن؟

janslu في ١٩ ديسمبر ٢٠٢٠

بعد الوصول إلى Memory usage: 1.59 GB (RSS: 1.83 GB) لموقع أساسي للغاية استغرق حوالي 30 ثانية على كل توجيه @apply للمكونات ، تساءلت عن الأمر. يحدث نفس الشيء هنا ، حيث يتم دفع حوالي 60 ميجابايت من CSS وخرائط Sourcemaps عبر HMR.

لذلك كان الحل البديل الخاص بي هو عدم تنفيذ purge: { enabled: process.env.NODE_ENV === 'production' } وإجباره على enabled: true .

لست متأكدا من أين حصلت على هذا الخط. إذا قمت بالتطهير ، فأنت تريد التطهير في الإنتاج والتطوير. إذا كانت فئة CSS مفقودة بسبب التطهير ، فأنت تريد أن يحدث ذلك في كلتا البيئتين ويجب أن تعمل إعدادات التطهير الصحيحة على التطوير أيضًا.

على الأقل ، أصبحت صفحاتي الأربعة قابلة للاستخدام مرة أخرى بعد دفعات HMR وأصبحت CSS الأولية حوالي 2 ميغا بايت فقط مع خرائط المصادر. لا يزال البناء الأولي يأخذ إلى الأبد واستخدام الذاكرة لا يزال من المخططات بالرغم من ذلك.