พิมพ์ลายนิ้วมือ Ember-cli และสินทรัพย์แบบไดนามิก

เมื่อเรากำลังสร้างแอปพลิเคชัน Ember ไม่ช้าก็เร็ว เราจะต้องปรับใช้แอปพลิเคชันดังกล่าวกับการใช้งานจริง ปัญหาหนึ่งที่อาจเกิดขึ้นจะเกี่ยวข้องกับสินทรัพย์

แอปพลิเคชันที่ใช้งานจริงโดยไม่มีเนื้อหาลายนิ้วมือ (เช่น สำหรับการปรับใช้ทุกครั้งที่คุณสร้างเส้นทางที่ไม่ซ้ำกันสำหรับไฟล์คงที่ทุกไฟล์) จะถูกล็อคไว้ในแคชของผู้ใช้ของคุณและบังคับให้คุณรอจนกว่าแคชของผู้ใช้จะถูกล้างหรือหมดอายุ

Ember-cli ต้องขอบคุณ broccoli-asset-rev ที่มีวิธีแก้ปัญหาที่ดี — เพียงเปิดใช้งานการพิมพ์ลายนิ้วมือในการกำหนดค่า:

ดังที่คุณคงสังเกตเห็นแล้วว่า เราได้เพิ่ม GenerateAssetMap: true ซึ่งสั่งให้ broccoli-asset-rev สร้าง AssetMap.json ในไดเรกทอรี Assets/

ไฟล์นี้จะมีชื่อไฟล์เนื้อหาต้นฉบับและลายนิ้วมือที่เทียบเท่ากัน บางอย่างเช่น:

ทุกอย่างดูดี - มีปัญหาตรงไหน?

ปัญหาจะเกิดขึ้นเร็วๆ นี้ เนื่องจากเราจะสร้างชื่อของเนื้อหาแบบไดนามิก Broccoli กำลังจับคู่สิ่งที่เรามีใน AssetMap ทางด้านซ้ายและแทนที่ด้วยสิ่งที่อยู่ทางด้านขวา ตัวอย่างเช่น เราได้สร้างรูปภาพเป็นคุณสมบัติที่คำนวณได้:

ตอนนี้ เราไม่สามารถจับคู่มันเป็นชื่อคงที่ได้ เนื่องจาก `skin` สามารถมีค่าใดๆ ก็ได้ จะทำอย่างไร? เรามีหลายทางเลือก:

โซลูชัน # 1 (วิธีที่ง่ายที่สุด)

นี่เป็นวิธีแก้ปัญหาที่ตรงไปตรงมาและเรียบง่ายที่สุดที่คุณอาจได้รับ และฉันขอแนะนำให้ดำเนินการหากเป็นไปได้ และคุณมีเนื้อหาแบบไดนามิกไม่มากนัก

ง่ายๆ เท่าที่จะทำได้ — สร้างเส้นทางไปยังสินทรัพย์ของคุณให้คงที่

หากคุณคิดว่าโซลูชันนี้อาจไม่เหมาะกับคุณ เรามาดำเนินการต่อกัน

โซลูชัน # 2 (ไม่ใช่กระสุนเงิน)

หากคุณมีเนื้อหาจำนวนมาก คุณจะมีธงของประเทศต่างๆ และคุณต้องจับคู่ธงเหล่านั้นแบบไดนามิก ก่อนอื่น ถ้าคุณไม่ขี้เกียจพอ ให้ลองใช้โซลูชัน #1 ถ้าไม่เช่นนั้น ให้กลับไปที่ไฟล์ AssetMap.json ที่เราเคยเห็นกันก่อนดีกว่า

เมื่อทราบว่า AssetMap.json แก้ไขไฟล์คงที่ทั้งหมดให้เทียบเท่ากับลายนิ้วมือ เราจึงสามารถลองโหลดก่อนที่แอปพลิเคชันจะเริ่มทำงานและสร้างบริการที่กำหนดเองเพื่อแก้ไข เพื่อสิ่งนั้น เราควรสร้าง Initializers/asset-map.js และ services/asset-map.js

โซลูชันนี้จะโหลด AssetMap.json ก่อนที่แอปพลิเคชันจะโหลด และจะเติมบริการ AssetMap ด้วยค่าที่แมป สิ่งนี้ทำให้เราสามารถอัดฉีดบริการแผนที่สินทรัพย์ในทุกที่ที่เราต้องการเพื่อแก้ไขสินทรัพย์ของเรา

ข้อควรทราบประการหนึ่งสำหรับโซลูชันนี้ — AssetMap.json จะถูก แคช ในเบราว์เซอร์ไคลเอ็นต์ หากคุณสามารถหลีกเลี่ยงการจัดเก็บไฟล์นั้นใน CDN และ/หรือตั้งค่าให้หลีกเลี่ยงการแคชได้ (เช่น ส่งส่วนหัวโดยไม่มีแคช) วิธีแก้ปัญหานี้อาจเหมาะกับคุณ ถ้าไม่เรามาดูกันว่าเราจะทำอะไรได้อีก

โซลูชัน # 3

ลายนิ้วมือ AssetMap.json และแทรกลงในแอปของคุณ

หากเรารวมโซลูชันก่อนหน้านี้ทั้งหมดและการพิมพ์ลายนิ้วมือของ AssetMap.json เราจะได้ผลลัพธ์ที่น่าหวัง วิธีแก้ปัญหาที่เสร็จสิ้นแล้วจบลงในส่วนเสริมของ ember — RuslanZavacky/ember-cli-ifa

Addon ให้การแทรก AssetMap-HASH.json ลงในแอปพลิเคชันของคุณโดยอัตโนมัติ นอกจากนี้ยังมีตัวเริ่มต้น บริการ และผู้ช่วยเหลือเพื่อรับการอ้างอิงในแอปของคุณไปยังเนื้อหาลายนิ้วมือ

เพียงเปิดใช้งานใน environment.js ของคุณเป็น

ifa: { enabled: true }

และกำหนดค่าบล็อกลายนิ้วมือใน ember-cli-build.js ของคุณ

fingerprint: {
  enabled: EmberApp.env() === 'production',
  prepend: '', // can be a link to your CDN
  generateAssetMap: true,
  fingerprintAssetMap: true
},

ฉันหวังว่ามันจะช่วยได้ และยินดีรับข้อเสนอแนะทั้งหมดอย่างอบอุ่น!