التحميل الكسول

webpack-demo
 ├── package.json
 ├── package-lock.json
 ├── webpack.config.js
 ├── /dist
 ├── /src
 │   ├── index.js
+│   └── print.js
 └── /node_modules

console.log(
  "The print.js module has loaded! See the network tab in dev tools...",
);

export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

+ import _ from 'lodash';
+
- async function getComponent() {
+ function component() {
    const element = document.createElement('div');
-   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+   const button = document.createElement('button');
+   const br = document.createElement('br');

+   button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.appendChild(br);
+   element.appendChild(button);
+
+   // لاحظ أنه بسبب وجود طلب شبكة، سيحتاج الموقع/التطبيق
+   // بمستوى إنتاج إلى إظهار مؤشر تحميل ما.
+   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
+     const print = module.default;
+
+     print();
+   });

    return element;
  }

- getComponent().then(component => {
-   document.body.appendChild(component);
- });
+ document.body.appendChild(component());

...
          Asset       Size  Chunks                    Chunk Names
print.bundle.js  417 bytes       0  [emitted]         print
index.bundle.js     548 kB       1  [emitted]  [big]  index
     index.html  189 bytes          [emitted]
...

 webpack-demo
  ├── package.json
  ├── package-lock.json
  ├── webpack.config.js
  ├── /dist
  ├── /src
  │   ├── index.js
+ │   └── print.js
  └── /node_modules

console.log(
  "The print.js module has loaded! See the network tab in dev tools...",
);

export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

  import _ from 'lodash';
+ import defer * as print from './print';

  function component() {
    const element = document.createElement('div');
    const button = document.createElement('button');
    const br = document.createElement('br');

    button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.appendChild(br);
    element.appendChild(button);

-   // Note that because a network request is involved, some indication
-   // of loading would need to be shown in a production-level site/app.
+   // في هذا المثال، تُنزّل وحدة print لكنها لا تُقيّم،
+   // لذلك لا يوجد طلب شبكة بعد النقر على الزر.
-   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
+   button.onclick = e => {
      const print = module.default;
+     //                  ^ تُقيّم الوحدة هنا.

      print();
-   });
+   };

    return element;
  }

  getComponent().then(component => {
    document.body.appendChild(component);
  });
  document.body.appendChild(component());

  import _ from 'lodash';
- import defer * as print from './print';

  function component() {
    const element = document.createElement('div');
    const button = document.createElement('button');
    const br = document.createElement('br');

    button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.appendChild(br);
    element.appendChild(button);

    // في هذا المثال، تُنزّل وحدة print لكنها لا تُقيّم،
    // لذلك لا يوجد طلب شبكة بعد النقر على الزر.
    button.onclick = e => {
+     const print = require('./print');
+     //            ^ تُقيّم الوحدة هنا.
      const print = module.default;
-     //                  ^ The module is evaluated here.

      print();
    };

    return element;
  }

  getComponent().then(component => {
    document.body.appendChild(component);
  });
  document.body.appendChild(component());

export const greeting = "Hello";

export const greeting = "Bonjour";

const language = navigator.language.split("-")[0]; // "en", "fr", etc.
const locale = import.defer("./locales/" + language + ".js");

document.getElementById("btn").addEventListener("click", () => {
  // تُقيّم وحدة اللغة هنا، عند أول وصول إلى خاصية.
  document.getElementById("output").textContent = locale.greeting;
});