Чӣ гуна гарм кардани барқарорсозӣ (hot reload) дар…

Vue CLI webpack-dev-server-ийг ашигладаг бөгөөд энэ нь Hot Module Replacement (HMR)-ийг агуулдаг.

Vue-д HMR-ийн ажиллах процесс дараах байдлаар явагддаг:

Хөгжүүлэлтийн серверийг эхлүүлэх: npm run serve гүйцэтгэхэд, webpack-dev-server серверийг эхлүүлж, төслийн файлуудыг хянах эхэлдэг.
Файлд өөрчлөлт оруулах: Хөгжүүлэгч файлд өөрчлөлт хадгалах үед (.vue, .js, .css гэх мэт).
Өөрчлөлтийг илрүүлэх: webpack-dev-server өөрчлөлтийг илрүүлдэг.
Модуль дахин бүтээх: Webpack өөрчлөгдсөн модулийг дахин бүрдүүлдэг (жишээ нь, Vue бүрэлдэхүүн хэсэг).
Шинчлэлийг илгээх: webpack-dev-server шинэчлэлтийн багцыг (hotswap update) WebSocket дамжуулан хөтөч рүү илгээдэг.
Шинчлэлийг хэрэгжүүлэх: HMR-ийн клиент хэсэг (бүтээлийн кодод нэгтгэсэн), багцыг авсны дараа түүнийг хэрэгжүүлэхийг оролддог. Vue бүрэлдэхүүн хэсгүүдэд энэ нь хуучин бүрэлдэхүүн хэсгийн тодорхойлолтыг шинэтэй солихыг, одоогийн байдал (жишээ нь, data() доторх өгөгдөл) хадгалахыг илэрхийлдэг.
DOM-ийг шинэчлэх: Vue шинэ загвар эсвэл бүрэлдэхүүн хэсгийн логик ашиглан DOM-ийг реактив байдлаар шинэчилдэг, бүх хуудас дахин ачаалахгүй.

Шинэчлэлийн багцын бүтэц жишээ:

{
  "hash": "...", // Бүтээлийн хэш
  "c": { // Шинэчлэгдсэн бүтээлийн хэсгүүд
    "src/components/HelloWorld.vue": true // Шинэчлэх шаардлагатай модуль
  }
}

HMR-ийн клиент код энэ багцыг аван, src/components/HelloWorld.vue-д зориулсан шинэчлэлийн логикыг гүйцэтгэдэг.

// HMR-ийн клиент код доторх жишээ псевдокод
if (module.hot) {
  module.hot.accept('./components/HelloWorld.vue', function() {
    // Vue бүрэлдэхүүн хэсгийг шинэчлэх логик, байдал хадгалах
    // Ихэвчлэн энэ процессыг vue-loader болон webpack-dev-server хамтдаа удирддаг.
  });
}

Ингэснээр, бүрэлдэхүүн хэсэгт өөрчлөлт оруулахад зөвхөн тухайн бүрэлдэхүүн хэсэг браузерийн санах ойд шинэчлэгдэж, бүх хуудас дахин ачаалах шаардлагагүй бөгөөд энэ нь хөгжүүлэлтийг ихээхэн хурдлуулдаг.

Чӣ гуна гарм кардани барқарорсозӣ (hot reload) дар мисоли Vue CLI кор мекунад?