Agar ilovangiz to'g'ridan-to'g'ri Internetdan mavjud bo'lsa, aktivlarni optimallashtirish muhim bo'lishi mumkin. Yaxshi strategiya yordamida siz ko'p xarajat talab qiladigan veb-trafikni kamaytirishingiz yoki ba'zi mobil yoki chekka mijozlarda tezlikni oshirishingiz mumkin. Ba'zi hollarda yuqori darajada optimallashtirilgan sahifalar Google qidiruvidagi o'rinni oshirishi mumkin. Google-ning o'zida kontentni optimallashtirish va optimallashtirish nima uchun muhimligi haqida yaxshi hujjatlar mavjud.



Kontent samaradorligini optimallashtirish | Veb asoslari | Google Developers
Bizning veb-ilovalarimiz o'z qamrovi, ambitsiyalari va funksionalligi jihatidan o'sishda davom etmoqda -- bu yaxshi narsa. Biroq,…developers.google.com



Veb-paket paydo bo'lishidan bir necha kun oldin, agar siz aktivlarni qurish va optimallashtirishni istasangiz, gulp yordam dasturi bo'lgan. Ammo 2019 yilda burchakli veb-ilovani ishlab chiqayotgan bo'lsangiz, endi katta va xunuk gulpfile.js yozmaslikdan xursand bo'lishingiz mumkin.

Veb-paket paydo bo'lishidan oldingi kunlarda, siz aktivlar yoki butun ilovalarni yaratish va optimallashtirishni xohlaganingizda "gulp" asosiy yordamchi dastur edi. Ammo 2019-yilda, agar siz Angular veb-ilovasini ishlab chiqayotgan bo‘lsangiz, endi katta va xunuk gulpfile.js yozishingiz shart bo‘lmasa, bu sizni xursand qilishi mumkin.

JavaScript olami tez harakat qilmoqda. Hozir, men ushbu maqolani yozayotganimda, veb-paket - bu ramkasiz (“VanillaJS” 👏) yoki burchakli ilovalarni yozayotganingizdan qat'i nazar, yangi veb-ilovalarni yaratish uchun eng zamonaviy hisoblanadi.

JavaScript koinoti tez harakat qilmoqda, ammo Webpack haqidagi ushbu maqola ramkasiz (“VanillaJS” 👏) yoki burchakli ilovalarni yozishingizdan qatʼiy nazar, yangi veb-ilovalarni yaratish uchun eng zamonaviy hisoblanadi.

Webpack ajoyib ish qiladi va katta hamjamiyatga ega. Biroq, Angular-dagi aktivlaringizni optimallashtirish juda qiyin, chunki «burchakli klip ularni xuddi shunday dist jildiga nusxalaydi.

Webpack ajoyib ish qiladi va katta hamjamiyatga ega. Biroq, Angular-dagi aktivlaringizni optimallashtirish qiyin, chunki «burchak klipi ularni qanday bo'lsa, dist jildiga ko'chiradi.

1. Maxsus Webpack konfiguratsiyasini kiriting

npm i -D @angular-builders/custom-webpack

Angular drops ng eject buyrug'i veb-paket konfiguratsiyasini sozlash uchun ushbu paket sizga asl nusxaga tegmasdan maxsus veb-paket konfiguratsiyasini kiritish imkoniyatini beradi (btw. bu yangilanish xavfsizroq ko'rinadi). U index.htmlni mutatsiyalash kabi boshqa afzalliklarni ham beradi va u yaxshi hujjatlashtirilgan.

Ushbu paketni o'rnatgandan so'ng, quruvchilarni o'zgartiring va angular.jsonga customWebpackConfig qo'shing va oldinga siljiting.

"projects": {
  ...
  "[project]": {
    ...
    "architect": {
      ...
      "[architect-target]": {
        "builder": "@angular-builders/custom-webpack:[browser|server|karma|dev-server]",
        "options": {
          "customWebpackConfig": {
            "path": "webpack.config.js"
          },
              ...
        }


«@angular-builders/custom-webpack
Veb-paket konfiguratsiyasini chiqarmasdan (ng eject) npm i -D…www.npmjs.com”



2. Webpack preprocessor plaginini o'rnating

Chuqur sho'ng'in tarmog'iga kirib borganimdan so'ng, nihoyat "github" da mening ehtiyojlarimga mos keladigan plaginni topdim. Ba'zi eskirish to'g'risida ogohlantirish paydo bo'lgani uchun men yangi "webpack Compiler Hooks API" dan foydalanish uchun kodni tuzataman.

npm i -D @jkroepke/webpack-file-preprocessor-plugin

Muvaffaqiyatli o'rnatishdan so'ng, siz hozirda aktivlaringizni optimallashtirishingiz mumkin.



@jkroepke/webpack-file-preprocessor-plugin
Emissiya qilishdan oldin aktivlarni qayta ishlash uchun engil, ammo umumiy veb-paket plagini. $ npm oʻrnatish…www.npmjs.com



3. webpack.conf.js ni yarating

angular.json yaqinida webpack.conf.js nomli yangi fayl yarating. "Xususiy veb-paket to'plamidan olingan misol" ga rioya qilish uning qanday ishlashini yaxshi tushunish imkonini beradi.

Quyidagi misol yuqoridan webpack-file-preprocessor-plaginni sozlashni ko'rsatadi:

4. Qo'shimcha yordamchilarni qo'shing

JSONni kichiklashtirish - bu birinchi yaxshi ov. Ammo HTML yoki SVG fayllarini kichiklashtirish haqida nima deyish mumkin?

Uni arxivlash uchun sizga html-minifier kabi kichik yordamchi dasturlar kerak bo‘ladi, keyin esa WebpackFilePreprocessorPluginni ikkinchi marta, lekin boshqa konfiguratsiya bilan qo‘shing:

Bajarildi! — “Bu yerda” borishga tayyor misol topasiz.

Men plaginning funksionalligini sinab ko'rishni o'rganish uchun so'rovlarni olishdan xursandman. Agar xohlasangiz, menga yordam bering va repoga yulduzcha qo'ying.



jkroepke/webpack-file-preprocessor-plugin
Emissiya qilishdan oldin aktivlarni oldindan qayta ishlash uchun engil, ammo umumiy veb-paket plagini. $ npm oʻrnatish…github.com