You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.
336
+
337
+
This project setup supports code splitting via [dynamic `import()`](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand). Its [proposal](https://github.com/tc39/proposal-dynamic-import) is in stage 3. The `import()` function-like form takes the module name as an argument and returns a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) which always resolves to the namespace object of the module.
338
+
339
+
Here is an example:
340
+
341
+
### `moduleA.js`
342
+
343
+
```js
344
+
constmoduleA='Hello';
345
+
346
+
export { moduleA };
347
+
```
348
+
### `App.js`
349
+
350
+
```js
351
+
importReact, { Component } from'react';
352
+
353
+
classAppextendsComponent {
354
+
handleClick= () => {
355
+
import('./moduleA')
356
+
.then(({ moduleA }) => {
357
+
// Use moduleA
358
+
})
359
+
.catch(err=> {
360
+
// Handle failure
361
+
});
362
+
};
363
+
364
+
render() {
365
+
return (
366
+
<div>
367
+
<button onClick={this.handleClick}>Load</button>
368
+
</div>
369
+
);
370
+
}
371
+
}
372
+
373
+
exportdefaultApp;
374
+
```
375
+
376
+
This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button.
377
+
378
+
You can also use it with `async` / `await` syntax if you prefer it.
379
+
331
380
## Adding a Stylesheet
332
381
333
382
This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
0 commit comments