Importy HTML

Uwzględnij w internecie

Dlaczego import?

Zastanów się, w jaki sposób wczytujesz różne typy zasobów w internecie. Dla JavaScriptu mamy <script src>. W przypadku CSS należy prawdopodobnie przejść na stronę <link rel="stylesheet">. W przypadku zdjęć – <img>. Film zawiera <video>. Dźwięk, <audio>... Przejdź do sedna sprawy! Większość treści w internecie wczytuje się w prosty, deklaracyjny sposób. Nie w przypadku języka HTML. Dostępne opcje:

  1. <iframe> – sprawdzone, ale bardzo ciężkie. Element iframe znajduje się całkowicie w osobnym kontekście niż strona. Chociaż jest to w większości świetna funkcja, wiąże się to z dodatkowymi wyzwaniami (zmniejszenie rozmiaru ramki do treści jest trudne i bardzo frustrujące, jeśli nie da się ich zmienić w scenariusz – jest to praktycznie niemożliwe).
  2. AJAX – uwielbiam xhr.responseType="document", ale mówisz, że do wczytywania kodu HTML potrzebuję JavaScriptu? To nie wygląda na poprawne.
  3. CrazyHacksTM – umieszczone w ciągach tekstowych, ukryte jako komentarze (np. <script type="text/html">). Ojej!

Widzisz ironię? Praca z najbardziej podstawowymi treściami w internecie, czyli HTML, wymaga największego wysiłku. Na szczęście komponenty sieciowe pomagają nam ponownie rozwiązać problem.

Wprowadzenie

Importy HTML, będące częścią przesyłania komponentów sieciowych, umożliwiają dodawanie dokumentów HTML do innych dokumentów HTML. Nie musisz ograniczać się do znaczników. Import może też obejmować pliki CSS, JavaScript i wszelkie inne elementy, które może zawierać plik .html. Innymi słowy, oznacza to, że import jest świetnym narzędziem do wczytywania powiązanych z nimi kodu HTML/CSS/JS.

Podstawy

Dodaj na swojej stronie funkcję importu, deklarując <link rel="import">:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

Adres URL importu jest nazywany lokalizacją importu. Aby wczytać treści z innej domeny, lokalizacja importu musi mieć włączoną funkcję CORS:

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

Wykrywanie funkcji i pomoc

Aby wykryć pomoc, sprawdź, czy w elemencie <link> istnieje atrybut .import:

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

Obsługa przeglądarek jest wciąż rozwijana. Chrome 31 była pierwszą przeglądarką, w której pojawiła się taka implementacja, ale inni dostawcy przeglądarek czekają na sprawdzenie, jak będą wyglądać moduły ES. Jednak w innych przeglądarkach webcomponents.js polyfill działa znakomicie, dopóki nie zostaną powszechnie obsługiwane.

Łączenie zasobów

Importowane logi są konwencją grupowania danych HTML/CSS/JS (nawet innych importów HTML) w jeden materiał. To wbudowana funkcja, ale o dużych możliwościach. Jeśli tworzysz motyw lub bibliotekę albo po prostu chcesz podzielić aplikację na logiczne fragmenty, przekazanie użytkownikom jednego adresu URL będzie atrakcyjniejsze. A nawet całą aplikację przez importowanie. Zastanów się przez chwilę.

Autentyczny przykład to Bootstrap. Bootstrap składa się z pojedynczych plików (bootstrap.css, bootstrap.js, fonts), wymaga wtyczki JQuery i przedstawia przykłady znaczników. Dla deweloperów takich jak elastyczność à la carte. Dzięki temu mogą oni wybrać te części platformy, z których są korzystać. Zakładam jednak, że Twoja typowa aplikacja JoeDeveloperTM idzie w łatwy sposób i pobiera całą aplikację Bootstrap.

Importowanie ma ogromne znaczenie w przypadku takich aplikacji jak Bootstrap. Oto przyszłość wczytywania Bootstrap:

<head>
    <link rel="import" href="bootstrap.html">
</head>

Użytkownicy po prostu wczytują link Importuj HTML. Nie muszą zaprzątać sobie głowy kompleksem plików. Zamiast tego cała część kodu Bootstrap jest zarządzana i umieszczana w pliku importu bootstrap.html:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

Zaczekaj. Jest ekscytująca.

Zdarzenia wczytywania/błędu

Element <link> wywołuje zdarzenie load, gdy import się uda, oraz onerror, jeśli próba się nie powiedzie (np. jeśli zasób 404).

Importowane są próby natychmiastowego wczytania. Aby w łatwy sposób uniknąć problemów, użyj atrybutów onload/onerror:

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

Jeśli importujesz dynamicznie:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

Korzystanie z treści

Import na stronie nie oznacza, że „upuść zawartość tego pliku tutaj”. To znaczy „parser, pobierz ten dokument, abym mógł go użyć”. Aby faktycznie korzystać z treści, musisz podjąć odpowiednie działania i napisać scenariusz.

Kluczowym momentem aha! jest uświadomienie sobie, że import jest tylko dokumentem. W rzeczywistości treść importowanego dokumentu nosi nazwę dokumentu importu. Umiesz manipulować głębią importu za pomocą standardowych interfejsów DOM API.

link.import

Aby uzyskać dostęp do treści importu, użyj właściwości .import elementu link:

var content = document.querySelector('link[rel="import"]').import;

link.import ma wartość null w następujących warunkach:

  • Przeglądarka nie obsługuje importowania kodu HTML.
  • <link> nie zawiera rel="import".
  • Element <link> nie został dodany do DOM.
  • Element <link> został usunięty z DOM.
  • Zasób nie obsługuje CORS.

Pełny przykład

Załóżmy, że warnings.html zawiera:

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

Importerzy mogą pobrać konkretną część tego dokumentu i skopiować ją na swoją stronę:

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

Skrypty w importach

W głównym dokumencie nie ma importów. Mają satelitę. Import może jednak nadal działać na stronie głównej, mimo że główny dokument pozostaje nadrzędnym dokumentem. Import może uzyskać dostęp do własnego DOM lub DOM strony, która go importuje:

Przykład - import.html, który dodaje jeden ze swoich arkuszy stylów do strony głównej

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

Zwróć uwagę, co się tutaj dzieje. Skrypt w importowanym dokumencie odwołuje się do zaimportowanego dokumentu (document.currentScript.ownerDocument) i dołącza część tego dokumentu do strony importu (mainDoc.head.appendChild(...)). To dość niezrozumiałe, jeśli mnie o to poprosisz.

Reguły JavaScriptu w trakcie importu:

  • Skrypt w importie jest uruchamiany w kontekście okna zawierającego importowany plik document. Zatem window.document odnosi się do dokumentu strony głównej. Ma to 2 przydatne wnioski:
    • zdefiniowane w imporcie kończą się window.
    • nie musisz robić nic trudnego, na przykład dołączyć bloki <script> importu do strony głównej. Skrypt zostaje wykonany.
  • Importy nie blokują analizowania strony głównej. Skrypty w nich są jednak przetwarzane w określonej kolejności. Oznacza to, że zachowujesz właściwy sposób działania skryptów przy zachowaniu właściwej kolejności skryptów. Więcej informacji na ten temat znajdziesz poniżej.

Przesyłanie komponentów sieciowych

Układ importu HTML świetnie nadaje się do wczytywania treści wielokrotnego użytku z internetu. Jest to doskonały sposób rozpowszechniania komponentów sieciowych. Wszystko, od podstawowych elementów HTML <template> po gotowe elementy niestandardowe z modelem Shadow DOM [1, 2, 3]. Gdy te technologie są używane razem, importy stają się narzędziem #include dla komponentów sieciowych.

Obejmuje szablony

Element Szablon HTML doskonale nadaje się do importowania kodu HTML. <template> doskonale nadaje się do wyodrębniania sekcji znaczników, z których aplikacja importująca będzie mogła korzystać zgodnie ze swoimi potrzebami. Zawijanie treści w elemencie <template> daje też dodatkową korzyść polegającą na tym, że treści stają się bezwładne, dopóki nie zostaną użyte. Oznacza to, że skrypty nie działają, dopóki szablon nie zostanie dodany do modelu DOM. Wow!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

Rejestrowanie elementów niestandardowych

Elementy niestandardowe to inna technologia komponentów sieciowych, która doskonale współpracuje z importami HTML. Importy mogą wykonywać skrypty, możesz więc zdefiniować i zarejestrować swoje elementy niestandardowe, aby użytkownicy nie musieli tego robić. Nazwij go „automatyczna rejestracja”.

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

Ten import definiuje (i rejestruje) 2 elementy: <say-hi> i <shadow-element>. Pierwszy z nich przedstawia podstawowy element niestandardowy, który rejestruje się w ramach importu. Drugi przykład pokazuje, jak wdrożyć element niestandardowy, który tworzy model Shadow DOM z elementu <template>, a następnie rejestruje się.

Najlepsze w rejestrowaniu elementów niestandardowych w ramach importu HTML jest to, że importer po prostu zadeklaruje element na stronie. Bez okablowania.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

Uważam, że sam ten proces sprawia, że importowanie HTML jest idealnym sposobem udostępniania komponentów sieciowych.

Zarządzanie zależnościami i importem podrzędnym

Importy podrzędne

Warto uwzględnić inny import. Jeśli chcesz np. ponownie wykorzystać lub rozszerzyć inny komponent, użyj importu, by wczytać pozostałe elementy.

Poniżej znajdziesz rzeczywisty przykład platformy Polymer. To nowy komponent karty (<paper-tabs>), który wykorzystuje ponownie komponent układu i selektora. Zależnościami zarządzasz za pomocą importu HTML.

Paper-tabs.html (uproszczony):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

Deweloperzy aplikacji mogą zaimportować ten nowy element za pomocą:

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

Gdy w przyszłości pojawi się nowy, lepszy pakiet <iron-selector2>, możesz wymienić urządzenie <iron-selector> i od razu zacząć z niego korzystać. Dzięki importowaniu i komponentom internetowym nie stracisz użytkowników.

Zarządzanie zależnościami

Wszyscy wiemy, że ładowanie JQuery więcej niż raz na stronę powoduje błędy. Czy nie będzie to ogromny problem w przypadku komponentów sieciowych, gdy wiele komponentów korzysta z tej samej biblioteki? Nie, jeśli używamy importu HTML! Mogą być używane do zarządzania zależnościami.

Dodając biblioteki do importu w formacie HTML, automatycznie usuwasz duplikaty zasobów. Dokument jest analizowany tylko raz. Skrypty są wykonywane tylko raz. Załóżmy na przykład, że zdefiniujesz import jquery.html, który wczytuje kopię kodu JQuery.

jquery.html

<script src="http://cdn.com/jquery.js"></script>

Tego importu można użyć ponownie podczas kolejnych importów:

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

Plik jquery.html może znajdować się nawet na stronie głównej, jeśli potrzebna jest biblioteka:

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

Pomimo tego, że plik jquery.html znajduje się w wielu różnych drzewach importu, przeglądarka pobiera i przetwarza go tylko raz. Badanie panelu sieci dowodzi, że:

Jednorazowe żądanie jquery.html
Jednorazowe żądanie jquery.html

Możliwe spowolnienie działania witryny

Importowanie HTML jest niezwykle przydatne, ale jak w przypadku każdej nowej technologii internetowej, należy używać go z rozwagą. Sprawdzone metody tworzenia witryn wciąż są aktualne. Oto kilka kwestii, o których należy pamiętać:

Połącz importy

Zmniejszanie liczby żądań sieciowych jest zawsze ważne. Jeśli masz wiele linków do importu najwyższego poziomu, rozważ połączenie ich w jeden zasób i zaimportowanie tego pliku.

Vulkanize to narzędzie do kompilacji npm opracowane przez zespół Polymer, które rekurencyjnie skompresuje zestaw importów HTML do jednego pliku. Możesz go traktować jako etap kompilacji komponentów sieciowych.

Importy wykorzystują pamięć podręczną przeglądarki

Wiele osób zapomina, że stos sieciowy przeglądarki został przez lata dopracowany. Logikę tę wykorzystuje się również importowanie (i importy podrzędne). Import http://cdn.com/bootstrap.html może zawierać zasoby podrzędne, ale będą one przechowywane w pamięci podręcznej.

Treści są przydatne tylko wtedy, gdy je dodasz

Potraktuj treści jako bezwładne, dopóki nie skorzystasz z ich usług. Użyj normalnego, dynamicznie tworzonego arkusza stylów:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

Przeglądarka nie będzie żądać pliku style.css, dopóki do interfejsu DOM nie zostanie dodany element link:

document.head.appendChild(link); // browser requests styles.css

Innym przykładem są dynamicznie tworzone znaczniki:

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

Element h2 jest względnie nieistotny, dopóki nie dodasz go do DOM.

To samo dotyczy dokumentu importu. Jeśli nie dołączysz jego treści do DOM, pozostanie on bezobsługowy. W rzeczywistości w dokumencie importu bezpośrednio „wykona się” tylko <script>. Więcej informacji o importowaniu skryptów.

Optymalizacja pod kątem wczytywania asynchronicznego

Importuje renderowanie blokowe

Importuje blokowe renderowanie strony głównej. Jest to podobne do działania <link rel="stylesheet">. Przeglądarka blokuje renderowanie na arkuszach stylów przede wszystkim z myślą o zminimalizowaniu pola widzenia. Importy działają podobnie, ponieważ mogą zawierać arkusze stylów.

Aby działać całkowicie asynchronicznie i nie blokować parsera ani renderowania, użyj atrybutu async:

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

Powodem, dla którego async nie jest domyślnym importem HTML, jest fakt, że wymaga od programistów więcej pracy. „Synchroniczny” domyślnie oznacza, że importy HTML, które zawierają definicje elementów niestandardowych, są wczytywane i uaktualniane w określonej kolejności. W całkowicie asynchronicznym świecie deweloperzy musieliby samodzielnie zarządzać tańcem i synchronizacją czasu.

Możesz też utworzyć import asynchroniczny, dynamicznie:

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

Importy nie blokują analizy

Importy nie blokują analizy strony głównej. Skrypty zawarte w importach są przetwarzane w określonej kolejności, ale nie blokują strony importowania. Oznacza to, że zachowujesz właściwy sposób działania skryptów przy zachowaniu właściwej kolejności skryptów. Jedną z zalet umieszczenia importów w obiekcie <head> jest możliwość szybszego rozpoczęcia pracy parsera nad treścią. Pamiętaj przy tym, aby pamiętać o tym, że <script> w głównym dokumencie nadal będzie blokować stronę. Pierwsze <script> po zaimportowaniu zablokuje renderowanie strony. Dzieje się tak, ponieważ w środku importu może znajdować się skrypt, który musi zostać wykonany przed skryptem na stronie głównej.

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

W zależności od struktury aplikacji i przypadku użycia możesz zoptymalizować działanie asynchroniczne na kilka sposobów. Poniższe techniki ograniczają blokowanie renderowania strony głównej.

Scenariusz 1 (preferowany): nie masz skryptu w języku <head> ani w treści <body>

Zalecamy, aby unikać natychmiast po importowaniu <script>. Umieszczaj skrypty jak najwcześniej, ale to Ty stosujesz już tę sprawdzoną metodę, prawda? ;)

Oto przykład:

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

Wszystko znajduje się na dole.

Scenariusz 1.5. Import się dodaje

Inną opcją jest dodanie własnej zawartości do importu. Jeśli autor importu podpisze z deweloperem umowę, zgodnie z którą będzie działał, importowany element może zostać dodany do obszaru strony głównej:

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

Scenariusz 2. Masz skrypt w języku <head> lub w treści <body>

Jeśli Twój import trwa długo, pierwszy element <script>, który nastąpi po nim na stronie, zablokuje renderowanie strony. Na przykład Google Analytics zaleca umieszczenie kodu śledzenia w elemencie <head>. Jeśli nie możesz uniknąć umieszczenia kodu <script> w elemencie <head>, dynamiczne dodanie importu zapobiegnie zablokowaniem strony:

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

Możesz też dodać import na końcu pola <body>:

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

O czym należy pamiętać

  • Typ MIME importu to text/html.

  • Zasoby z innych źródeł muszą mieć włączony CORS.

  • Importy z tego samego adresu URL są pobierane i analizowane raz. Oznacza to, że skrypt w ramach importu jest wykonywany tylko po pierwszym zauważeniu importu.

  • Skrypty podczas importu są przetwarzane w określonej kolejności, ale nie blokują głównej operacji analizy dokumentu.

  • Link do importowania nie oznacza, że „#dołącz treść tutaj”. Oznacza to „parser, pobierz ten dokument, aby móc go później użyć”. Skrypty są wykonywane w momencie importowania, ale arkusze stylów, znaczniki i inne zasoby muszą zostać dodane do strony głównej bezpośrednio. Uwaga: <style> nie trzeba dodawać wprost. Jest to główna różnica między importem HTML a elementem <iframe>, który pisze „wczytuj i renderuj tę treść tutaj”.

Podsumowanie

Importy HTML umożliwiają grupowanie kodu HTML/CSS/JS w jeden zasób. Pomysł ten, choć jest przydatny, nabiera ogromnego potencjału w świecie komponentów sieciowych. Deweloperzy mogą tworzyć komponenty wielokrotnego użytku, z których inni będą mogli korzystać w swoich aplikacjach. Wszystko to jest dostarczane przez <link rel="import">.

Importowanie HTML to prosta koncepcja, ale umożliwia korzystanie z platformy na wiele ciekawych sposobów.

Przykłady zastosowań

  • Roześlij powiązane kody HTML/CSS/JS w jednym pakiecie. Teoretycznie możesz zaimportować całą aplikację internetową do innej.
  • Organizacja kodu – logicznie dziel koncepcje na różne pliki, co pozwoli zwiększyć modułowość i możliwość wielokrotnego wykorzystania**.
  • Prześlij co najmniej 1 definicję elementu niestandardowego. Import można użyć do register i uwzględnienia ich w aplikacji. Takie wzorce oprogramowania są poprawne, a interfejs/definicja elementu jest oddzielona od sposobu używania.
  • Zarządzaj zależnościami – duplikaty zasobów są automatycznie usuwane.
  • Skrypty z fragmentami kodu – przed importem plik w dużej bibliotece JS został w pełni przeanalizowany, aby można było rozpocząć pracę, co było bardzo powolne. W przypadku importowania biblioteka może zacząć działać od razu po przeanalizowaniu fragmentu A. Mniejsze opóźnienia.
// TODO: DevSite - Code sample removed as it used inline event handlers

  • Równoległa analiza HTML – pierwszy raz w przeglądarce udało się uruchomić równolegle dwa (lub więcej) parsery HTML.

  • Umożliwia przełączanie się między trybami debugowania i bez debugowania w aplikacji przez zmianę samego miejsca docelowego importu. Aplikacja nie musi znać, czy miejsce docelowe importu jest zasobem/skompilowanym zasobem czy drzewem importu.