Poly.jill/shim Intl với webpack?

Question

Tôi đang sử dụng React-Intl với webpack và tôi cần số Intl shim để hỗ trợ Safari và IE, nhưng tôi không muốn tải nó cho các trình duyệt đã hỗ trợ Intl spec.

Vùng chèn là khá lớn (900kb), làm cách nào để đảm bảo nó chỉ được tải trong các trình duyệt không hỗ trợ tính năng này?

Answer 1

Có một vài điều bạn cần làm.

1. Đảm bảo yêu cầu intl/Intl tải thư viện cốt lõi chứ không phải tất cả các quốc gia liên quan. Điều này sẽ làm giảm kích thước của thư viện từ khoảng 900kb xuống khoảng 150kb.

2. Sử dụng các chức năng require.ensure hoặc require([]) của webpack để chỉ yêu cầu động Intl.js khi cần. Thao tác này sẽ tạo một gói riêng biệt chỉ cho tệp Intl.js, tệp này sẽ được tải trên cơ sở khi cần thiết.

lib/shim.js

// shim for Intl needs to be loaded dynamically 
// so we callback when we're done to represent 
// some kind of "shimReady" event 
module.exports = function(callback) { 
    if (!window.Intl) { 
     require(['intl/Intl'], function(Intl) { 
      window.Intl = Intl; 
      callback(); 
     }); 
    } else { 
     setTimeout(callback, 0); // force async 
    } 
}; 

app.js

var shimReady = require('lib/shim'); 
shimReady(startApp); 

Lưu ý: Bạnthể cũng cần tiếp cận thông tin quốc gia cụ thể và tính chất. Đối với các nhu cầu cơ bản của tôi, tôi thực sự không yêu cầu dữ liệu này, nhưng nếu bạn chắc chắn đọc phần trên trang web Intl.js loading locale data.

Answer 2

An (phi webpack) phương pháp đơn giản sẽ làm điều gì đó như thế này trong HTML của bạn:

<script> 
if (!window.Intl) { document.write('<script src="/js/Intl.min.js"><\/script>'); } 
</script> 

Mặc dù document.write không được coi là một thực hành tốt nhất, điều này sẽ cung cấp một cách tiếp cận chặn để giải quyết vấn đề, dẫn đến mã ít hơn đáng kể trong ứng dụng của bạn. Giải pháp này không sử dụng webpack, nhưng có thể là một giải pháp phù hợp cho nhiều người trong tình huống này.