Next.js: تعطيل HMR

يتم دعم HMR دائمًا في وضع التطوير. لا توجد طريقة رسمية لإيقاف تشغيله.
ليس لدينا خطط للقيام بذلك على المدى القصير.

ألن يتسبب هذا في تحميل على الخادم ، فنحن بحاجة إلى طريقة لإيقاف تشغيل HMR للتشغيل في الإنتاج.

إنه خارج في الإنتاج. تأكد من أنك تقوم بتشغيل next build و next start أو next build و NODE_ENV=production node server.js في الإنتاج.

يمكن أن يكون إيقاف تشغيل HMR مفيدًا عند العمل على التخطيط. أنا أقوم بتحرير styled-components وبعض أنماط css العامة ، لكن المعاينة تتعطل قريبًا. والسبب هو أن الصفحة تحصل على مزيج من أنماط SSR المقدمة والأنماط التي تم إنشاؤها للتو. يبدو أنه لا توجد طريقة للتغلب على هذا إلا عن طريق إيقاف تشغيل HMR.

بالإضافة إلى أن HMR لا يزال متوافقًا فقط مع ES5 (لا يحتاج الجميع إلى تحويل الفئات بعد الآن) ، فقد كنت أواجه بانتظام أخطاء متناثرة متعلقة بـ HMR والتي تحدث فقط في التطوير. أود حقًا أن يكون لدي طريقة لتعطيله.

حتى الحل المبتكر سيكون موضع تقدير. لقد تحول إلى كابوس.

أعتقد أنني أواجه مشكلة ذات صلة. تحاول حاليًا استخدام نقطة مسار رد الفعل في صفحة Next.js. عند استدعاء this.setState من داخل معالج حدث Waypoint ، يظهر لي خطأ Maximum call stack size exceeded . يحدث هذا فقط عند تشغيل Next.js في وضع dev. إذا كنت npm run build و npm start فلا تحدث المشكلة.

ربما تتعلق بهذه القضية ؟

بأي طريقة يمكننا إعادة فتح هذه المشكلة. يمكن أن يكون HMR مزعجًا جدًا في مواقف متعددة. إذا لم تكن هذه أولوية ، هل يمكنك تقديم بعض المعلومات عن مكان العثور على هذا الرمز (لتعطيله يدويًا) و / أو إنشاء PRarunoda

نواجه حاليًا مشكلات ضخمة مع Apollo GraphQL + Next JS (5.0.0). getDataFromTree لا يعمل فقط وهذا يكسر العديد من الأشياء في إعدادنا :(

timneutkens ، arunoda ، هل يمكنك إعادة فتح هذا؟

وبالمناسبة https://github.com/zeit/next.js/issues/1938#issuecomment -358195616

تبدو مشكلة في shouldComponentUpdate . الشيء المهم الذي يجب معرفته هو أنه في وضع التطوير ، لا يتم استدعاء هذه الوظائف بسبب قيود وظيفة
أود أن أقول تشغيل في وضع الإنتاج محليًا وإضافة بعض التسجيل إلى وظائفك.

هذا يبدو وكأنه شيء رئيسي

في بعض الأحيان ، أرغب في تعطيل HMR في وضع dev فقط لتجنب ازدحام علامة تبويب شبكة أدوات dev بضوضاء الرسائل غير الضرورية.

"عند الطلب-إدخالات ping؟ page = / xxx" ، إلخ

الضغط على CMD-R لإعادة تحميل الصفحة لا يمثل مشكلة كبيرة ، وإعادة تشغيل الخادم للحصول على التحديثات في وضع prod هو ألم.

كحل بديل ، يمكنك منع طلبات hmr باستخدام ميزة "حظر الطلب" في أدوات تطوير Chrome

vanmik نصيحة عظيمة ، شكرًا! ✨

للعثور على حظر الطلب في Chrome (66 على الأقل) ، قد تحتاج إلى:

افتح "تخصيص والتحكم في DevTools" (ثلاث نقاط رأسية)> More tools > Request Blocking . سيؤدي هذا إلى فتح وحدة تحكم حظر الطلبات حيث يمكنك التحقق من مصادر الطلبات للحظر ، كما هو موضح في لقطة شاشة

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

لكنني آمل في المستقبل أن نحصل على شيء بسيط مثل:

// next.config.js
module.exports = {
  hmr: false
}

إدارة الموارد البشرية تمتص. إنه يجلب صعوبات في كثير من الأحيان أكثر من الفوائد (على سبيل المثال عندما يتم إعادة تحميل بعض أجزاء الكود أثناء التشغيل بينما لا يحدث ذلك مما يؤدي إلى حالة غير متسقة).

بينما توقف نصيحة vanmik عملية HMR الفعلية ، لا تزال وحدة تحكم بي مزدحمة بإدخالات http://localhost:3000/_next/on-demand-entries-ping?page=/xxx ، لكنها الآن مجرد أخطاء.

غير مقبول للتصحيح: - /

بالتأكيد أحب أن يكون

// next.config.js
module.exports = {
  hmr: false
}

ربما يمكن لشخص ما كتابة ملحق لهذا ؟؟؟

gihrig يمكنك تصفية هذه الأخطاء باستخدام قائمة سياق وحدة التحكم (انقر بزر الماوس الأيمن على الخطأ):

arunoda أي تقدم في هذا؟ أواجه مشكلة مع HMR و immutablejs proptypes - محبط للغاية. انظر: https://github.com/facebook/prop-types/issues/221

كان الحل الخاص بي هو تمكين request blocking ثم إضافة طلب on-demand-entries-ping إلى قائمة الطلبات المحظورة. آمل أن يساعد الآخرين الذين لا يحبون HMR بقدر ما أفعل.

لتعطيل Hot Module Reloading (HMR) في Next.js v7 + ، أضف هذا إلى ملفك next.config.js :

module.exports = {
  webpackDevMiddleware: (config) => {
    config.watchOptions = config.watchOptions || {};
    config.watchOptions.ignored = [
      // Don't watch _any_ files for changes
      /.*/,
    ];
    return config;
  },
};

سيؤدي هذا إلى تعطيل إعادة البناء عند التغيير ، مما يؤدي بدوره إلى عدم "رؤية" المتصفح أبدًا لأي تغييرات ، وبالتالي لن يقوم بإعادة تحميل أي شيء. هذا يعني أن Next.js لن يقوم بإعادة التحويل البرمجي

للحصول على حل يفرض إعادة تحميل الصفحة بالكامل عند كل تغيير ، راجع هذا التعليق أدناه .

دمج FWIW هذا قريبًا: https://github.com/zeit/next.js/pull/4508

للحصول على حل سيعيد تحميل الصفحة دائمًا بالتغييرات ، يمكنك إنشاء server.js :

const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {

  // ℹ️ Below is the magic which forces a page reload on every change
  // ℹ️ From https://github.com/zeit/next.js/issues/1109#issuecomment-446841487

  // The publish function tells the client when there's a change that should be hot reloaded
  const publish = app.hotReloader.webpackHotMiddleware.publish.bind(
    app.hotReloader.webpackHotMiddleware,
  );

  // Intercept publish events so we can send something custom
  app.hotReloader.webpackHotMiddleware.publish = (event, ...rest) => {
    let forwardedEvent = event;

    // upgrade from a "change" to a "reload" event to trick the browser into reloading
    if (event.action === 'change') {
      forwardedEvent = {
        action: 'reload',
        // Only `/_document` pages will trigger a full browser refresh, so we force it here.
        data: ['/_document'],
      };
    }

    // Forward the (original or upgraded) event on to the browser
    publish(forwardedEvent, ...rest);
  };
  // ℹ️ End force page reload on change

  // ... Whatever custom server setup you have. See: https://github.com/zeit/next.js/#custom-server-and-routing
});

أنا متأكد بنسبة 80 ٪ من أن هذا سوف ينكسر في المستقبل.

إنه اختراق مروع ، لكن الطريقة الوحيدة التي تمكنت من خلالها من التغلب على خطأ قد يتسبب في استهلاك علامة تبويب المتصفح> 100٪ من وحدة المعالجة المركزية ثم تعطل Chrome عند كل عملية إعادة تحميل ساخنة.

نأمل بحلول وقت اختراق الاختراق ، سيكون هناك حل رسمي أو إصلاح الأخطاء المذكورة في هذه المشكلة 👍

السبب في رغبتي في تعطيل HMR هو أن لوحة DevTools / Applications / ملفات تعريف الارتباط (Chrome Windows) تفقد التركيز أثناء كتابتها لأن تحديثات HMR تستمر في الخلفية. أظن أن هذا سيكون هو الحال حتى لو أخبرت webpackDevServer بتجاهل جميع الملفات. سيظل اتصال websocket يتم في الخلفية وأعتقد أن هذا الاتصال هو الذي يسحق لوحة ملفات تعريف الارتباط.

النقطة المهمة هي: الحل المثالي يجب أن يعطل HMR تمامًا. شكرا!

من المؤسف أنه لا يمكنك إضافة هذا إلى next.config.js

module.exports = {
  webpackDevMiddleware: config => {
    config.lazy = true;
    return config;
  },
};

يوجه هذا الخيار الوحدة النمطية للعمل في الوضع "الكسول" ، مما يعني أنها لن تتم إعادة تجميعها عندما تتغير الملفات ، بل على كل طلب. يبدو أنه شيء يأمله الكثير منا دون الحاجة إلى الذهاب إلى أبعد من حلول

المصدر : https://github.com/webpack/webpack-dev-middleware#lazy

عندما أحاول هذا على next 7.0.2 ، يظهر لي الخطأ التالي:

أتيحت الفرصة للعمل مع مشروع Create React App اليوم.

أعتقد أن جذر مشكلة HMR هذه ليس أن HMR شرير بقدر ما هو طريقة تنفيذها.

ببساطة ، جعل العميل يستقصي الخادم بشكل دوري أقل من مثالي.

من خلال ملاحظة سريعة ، يبدو أن CRA تستخدم اتصال مقبس لا يتصل إلا بالعميل عندما يتغير الملف ، ثم يعيد العميل تحميل الصفحة. ينتج عن هذا النظام أيضًا تحديث أسرع للمستعرض لأن العملية لا تعتمد على فاصل الاستقصاء التالي.

CRA مفتوح المصدر . سيكون من الرائع أن يتمكن أي شخص لديه الوقت والاهتمام من التعمق في ترقية Next's HMR لاتباع نموذج CRA (وجعله سهل التعطيل أيضًا ، بالطبع :-)

gihrig هناك على الأرجح عدة أسباب مختلفة تجعل الناس يتطلعون إلى تعطيل HMR.

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

من المحتمل أن يكون التبديل من الاقتراع إلى مآخذ الويب فكرة جيدة ، ولكن الاقتراع ليس "جذر المشكلة" ، أو بالأحرى لا علاقة له ببعض المشكلات التي واجهها الأشخاص هنا على الأقل.

لاحظ أن كلا التعليقين الأخيرين يقدمان افتراضات خاطئة:

• لا يستخدم Next.js أداة تحميل التفاعل الساخن ، فهو يعيد عرض شجرة المكون عند إصدار تغيير
• لا يقوم Next.js بالاستقصاء لتلقي التغييرات ، بل يقوم بالاستقصاء لتحديد الصفحات التي لا يزال يتم عرضها ، في كناري تم تغيير هذا إلى مقبس ويب فقط بحيث لا يرى المستخدم الاستقصاء يحدث في أدوات التطوير الخاصة بهم. لمزيد من التوسع في أعمال HMR هذه باستخدام اتصال مصدر الحدث ، مما يعني أن الخادم يرسل الأحداث (عند تغيير الملف) إلى المتصفح

timneutkens من الرائع سماع ذلك ، شكرًا. لم يكن افتراضًا خاطئًا ، رغم أنه كان معلومات قديمة. كانت RHL قيد الاستخدام عندما بدأنا في استخدام Next وكان سبب المشكلات التي واجهناها هو الذي دفعني للتعليق في الأصل في سلسلة الرسائل هذه. لم أر أي مشكلات متعلقة بـ HMR عند استخدام التالي منذ فترة حتى الآن ، على الرغم من ذلك.

في الواقع ، نحن الآن قادرون على تشغيل ES2017 build in dev!

بعد عامين من اشتكى الناس من HMR لا تزال هناك طريقة رسمية لتعطيله؟ !!

لماذا هذا loggin GET / _next / on-demand-إدخالات ping؟ الصفحة = / في تطبيق NON next.js الخاص بي؟

- حل ذاتي: اضطررت للتعليق على استخدام تطبيق logger. (morgan (dev)) الشيء الغريب هو أن Morgan مثبت على تطبيق مختلف بدون next.js ، لذلك هناك شيء ما يحدث مع تسجيل هذا بواسطة مورغان ، أريد أن أعرف لماذا يحدث هذا. لم يكن هذا يحدث قبل تثبيت next.js على مشروع مختلف.

يرجى إعادة فتح المشكلة بالتأكيد لم تحل.

+1