Skip to content

Commit 4776bf9

Browse files
dstaleydstaley
committed
use code splitting to dynamically load javascript based on route
1 parent 470b55e commit 4776bf9

File tree

1 file changed

+55
-70
lines changed

1 file changed

+55
-70
lines changed

‎assets/js/app.js

+55-70
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,56 @@
11
import 'babel-polyfill';
22

3-
import $ from 'jquery';
43
import async from 'async';
5-
import account from './theme/account';
6-
import auth from './theme/auth';
7-
import blog from './theme/blog';
8-
import brand from './theme/brand';
9-
import cart from './theme/cart';
10-
import category from './theme/category';
11-
import contactUs from './theme/contact-us';
12-
import compare from './theme/compare';
13-
import errors from './theme/errors';
14-
import errors404 from './theme/404-error';
15-
import giftCertificate from './theme/gift-certificate';
164
import global from './theme/global';
17-
import home from './theme/home';
18-
import orderComplete from './theme/order-complete';
19-
import rss from './theme/rss';
20-
import page from './theme/page';
21-
import product from './theme/product';
22-
import search from './theme/search';
23-
import sitemap from './theme/sitemap';
24-
import subscribe from './theme/subscribe';
25-
import wishlist from './theme/wishlist';
5+
6+
const scriptURL = document.currentScript.src;
7+
// eslint-disable-next-line camelcase, no-undef
8+
__webpack_public_path__ = scriptURL.slice(0, scriptURL.lastIndexOf('/') + 1);
269

2710
const PageClasses = {
2811
mapping: {
29-
'pages/account/orders/all': account,
30-
'pages/account/orders/details': account,
31-
'pages/account/addresses': account,
32-
'pages/account/add-address': account,
33-
'pages/account/add-return': account,
34-
'pages/account/add-wishlist': wishlist,
35-
'pages/account/recent-items': account,
36-
'pages/account/download-item': account,
37-
'pages/account/edit': account,
38-
'pages/account/inbox': account,
39-
'pages/account/return-saved': account,
40-
'pages/account/returns': account,
41-
'pages/auth/login': auth,
42-
'pages/auth/account-created': auth,
43-
'pages/auth/create-account': auth,
44-
'pages/auth/new-password': auth,
45-
'pages/auth/forgot-password': auth,
46-
'pages/blog': blog,
47-
'pages/blog-post': blog,
48-
'pages/brand': brand,
49-
'pages/brands': brand,
50-
'pages/cart': cart,
51-
'pages/category': category,
52-
'pages/compare': compare,
53-
'pages/contact-us': contactUs,
54-
'pages/errors': errors,
55-
'pages/errors/404': errors404,
56-
'pages/gift-certificate/purchase': giftCertificate,
57-
'pages/gift-certificate/balance': giftCertificate,
58-
'pages/gift-certificate/redeem': giftCertificate,
12+
'pages/account/orders/all': () => System.import('./theme/account'),
13+
'pages/account/orders/details': () => System.import('./theme/account'),
14+
'pages/account/addresses': () => System.import('./theme/account'),
15+
'pages/account/add-address': () => System.import('./theme/account'),
16+
'pages/account/add-return': () => System.import('./theme/account'),
17+
'pages/account/add-wishlist': () => System.import('./theme/wishlist'),
18+
'pages/account/recent-items': () => System.import('./theme/account'),
19+
'pages/account/download-item': () => System.import('./theme/account'),
20+
'pages/account/edit': () => System.import('./theme/account'),
21+
'pages/account/inbox': () => System.import('./theme/account'),
22+
'pages/account/return-saved': () => System.import('./theme/account'),
23+
'pages/account/returns': () => System.import('./theme/account'),
24+
'pages/auth/login': () => System.import('./theme/auth'),
25+
'pages/auth/account-created': () => System.import('./theme/auth'),
26+
'pages/auth/create-account': () => System.import('./theme/auth'),
27+
'pages/auth/new-password': () => System.import('./theme/auth'),
28+
'pages/auth/forgot-password': () => System.import('./theme/auth'),
29+
'pages/blog': () => System.import('./theme/blog'),
30+
'pages/blog-post': () => System.import('./theme/blog'),
31+
'pages/brand': () => System.import('./theme/brand'),
32+
'pages/brands': () => System.import('./theme/brand'),
33+
'pages/cart': () => System.import('./theme/cart'),
34+
'pages/category': () => System.import('./theme/category'),
35+
'pages/compare': () => System.import('./theme/compare'),
36+
'pages/contact-us': () => System.import('./theme/contact-us'),
37+
'pages/errors': () => System.import('./theme/errors'),
38+
'pages/errors/404': () => System.import('./theme/404-error'),
39+
'pages/gift-certificate/purchase': () => System.import('./theme/gift-certificate'),
40+
'pages/gift-certificate/balance': () => System.import('./theme/gift-certificate'),
41+
'pages/gift-certificate/redeem': () => System.import('./theme/gift-certificate'),
5942
// eslint-disable-next-line
6043
'global': global,
61-
'pages/home': home,
62-
'pages/order-complete': orderComplete,
63-
'pages/page': page,
64-
'pages/product': product,
65-
'pages/search': search,
66-
'pages/rss': rss,
67-
'pages/sitemap': sitemap,
68-
'pages/subscribed': subscribe,
69-
'pages/account/wishlist-details': wishlist,
70-
'pages/account/wishlists': wishlist,
44+
'pages/home': () => System.import('./theme/home'),
45+
'pages/order-complete': () => System.import('./theme/order-complete'),
46+
'pages/page': () => System.import('./theme/page'),
47+
'pages/product': () => System.import('./theme/product'),
48+
'pages/search': () => System.import('./theme/search'),
49+
'pages/rss': () => System.import('./theme/rss'),
50+
'pages/sitemap': () => System.import('./theme/sitemap'),
51+
'pages/subscribed': () => System.import('./theme/subscribe'),
52+
'pages/account/wishlist-details': () => System.import('./theme/wishlist'),
53+
'pages/account/wishlists': () => System.import('./theme/wishlist'),
7154
},
7255
/**
7356
* Getter method to ensure a good page type is accessed.
@@ -140,18 +123,20 @@ window.stencilBootstrap = function stencilBootstrap(templateFile, contextJSON =
140123

141124
return {
142125
load() {
143-
$(() => {
144-
const PageTypeFn = pages.get(templateFile); // Finds the appropriate module from the pageType object and store the result as a function.
145-
146-
if (PageTypeFn) {
147-
const pageType = new PageTypeFn(context);
126+
document.addEventListener('DOMContentLoaded', () => {
127+
const pageTypePromise = pages.get(templateFile);
128+
if (pageTypePromise !== false) {
129+
pageTypePromise().then(PageTypeFn => {
130+
// eslint-disable-next-line new-cap
131+
const pageType = new PageTypeFn.default(context);
148132

149-
pageType.context = context;
133+
pageType.context = context;
150134

151-
return loader(pageType, pages);
135+
return loader(pageType, pages);
136+
});
137+
} else {
138+
throw new Error(`${templateFile} Module not found`);
152139
}
153-
154-
throw new Error(`${templateFile} Module not found`);
155140
});
156141
},
157142
};

0 commit comments

Comments
 (0)