github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 18:47:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Demonstrate lazy-loading for Webpack-bundled KO components

Browse Source
This commit is contained in:
SteveSandersonMS
2016-03-08 17:03:09 +00:00
parent 25ba7986d8
commit 11d4873164
5 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts
View File

@@ -1,5 +1,6 @@
import * as ko from 'knockout';
import { Route, Router } from '../../router';
import navMenu from '../nav-menu/nav-menu';
// Declare the client-side routing configuration
const routes: Route[] = [
@@ -18,10 +19,13 @@ class AppRootViewModel {
this.route = this._router.currentRoute;
// Load and register all the KO components needed to handle the routes
ko.components.register('nav-menu', require('../nav-menu/nav-menu').default);
ko.components.register('home-page', require('../home-page/home-page').default);
ko.components.register('counter-example', require('../counter-example/counter-example').default);
ko.components.register('fetch-data', require('../fetch-data/fetch-data').default);
// The optional 'bundle?lazy!' prefix is a Webpack feature that causes the referenced modules
// to be split into separate files that are then loaded on demand.
// For docs, see https://github.com/webpack/bundle-loader
ko.components.register('nav-menu', navMenu);
ko.components.register('home-page', require('bundle?lazy!../home-page/home-page'));
ko.components.register('counter-example', require('bundle?lazy!../counter-example/counter-example'));
ko.components.register('fetch-data', require('bundle?lazy!../fetch-data/fetch-data'));
}
// To support hot module replacement, this method unregisters the router and KO components.

1
templates/KnockoutSpa/ClientApp/components/home-page/home-page.html
View File

@@ -11,5 +11,6 @@
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Knockout app will be rebuilt and a new instance injected is into the page.</li>
<li><strong>Code splitting and lazy loading</strong>. KO components may optionally be bundled individually and loaded on demand. For example, the code and template for 'Counter' is not loaded until you navigate to it..</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
</ul>