Route Based Code Splitting

.eslintignore

@@ -1,3 +1,3 @@
 **/node_modules/**
 !.eslintrc.js
-!.mocharc.js
+!.mocharc.js

greenwood.config.js

@@ -20,6 +20,50 @@ module.exports = {
     { rel: 'icon', href: FAVICON_HREF },
     { name: 'google-site-verification', content: '4rYd8k5aFD0jDnN0CCFgUXNe4eakLP4NnA18mNnK5P0' }
   ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      cacheGroups: {
+        about: {
+          test(module, chunks) {
+            const regexp = /about/i;
+            const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));
+
+            return result;
+          },
+          name: 'about'
+        },
+        docs: {
+          test(module, chunks) {
+            const regexp = /docs/i;
+            const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));
+
+            return result;
+          },
+          name: 'docs'
+        },
+        gettingStarted: {
+          test(module, chunks) {
+            const regexp = /getting-started/i;
+            const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));
+
+            return result;
+          },
+          name: 'getting-started'
+        },
+        plugins: {
+          test(module, chunks) {
+            const regexp = /plugins/i;
+            const result = `${module.name || ''}`.match(regexp) || chunks.some(chunk => `${chunk.name || ''}`.match(regexp));
+
+            return result;
+          },
+          name: 'plugins'
+        }
+      }
+    }
+  },
+
   plugins: [
     ...pluginGoogleAnalytics({
       analyticsId: 'UA-147204327-1'

package.json

@@ -33,4 +33,4 @@
     "nyc": "^14.0.0",
     "rimraf": "^2.6.3"
   }
-}
+}

packages/cli/src/config/babel.config.js

@@ -1,8 +1,8 @@
 module.exports = {
-  
+
   // https://github.com/babel/babel/issues/9937#issuecomment-489352549
   sourceType: 'unambiguous',
-  
+
   // https://github.com/babel/babel/issues/8731#issuecomment-426522500
   ignore: [/[\/\\]core-js/, /@babel[\/\\]runtime/],
 
@@ -12,12 +12,12 @@ module.exports = {
       // https://babeljs.io/docs/en/babel-preset-env
       '@babel/preset-env',
       {
-        
+
         // https://babeljs.io/docs/en/babel-preset-env#usebuiltins
         useBuiltIns: 'entry',
-        
+
         // https://babeljs.io/docs/en/babel-preset-env#corejs
-        corejs: { 
+        corejs: {
           version: 3,
           proposals: true
         },

packages/cli/src/config/webpack.config.common.js

@@ -138,6 +138,8 @@ module.exports = ({ config, context }) => {
       }]
     },
 
+    optimization: config.optimization,
+
     plugins: [
       new HtmlWebpackPlugin({
         filename: path.join(context.publicDir, context.indexPageTemplate),

packages/cli/src/lifecycles/config.js

@@ -11,6 +11,7 @@ let defaultConfig = {
   publicPath: '/',
   title: 'My App',
   meta: [],
+  optimization: {},
   plugins: [],
   themeFile: 'theme.css'
 };
@@ -24,7 +25,7 @@ module.exports = readAndMergeConfig = async() => {
 
       if (await fs.exists(path.join(process.cwd(), 'greenwood.config.js'))) {
         const userCfgFile = require(path.join(process.cwd(), 'greenwood.config.js'));
-        const { workspace, devServer, publicPath, title, meta, plugins, themeFile } = userCfgFile;
+        const { workspace, devServer, publicPath, title, meta, plugins, themeFile, optimization } = userCfgFile;
 
         // workspace validation
         if (workspace) {
@@ -96,6 +97,10 @@ module.exports = readAndMergeConfig = async() => {
           customConfig.themeFile = themeFile;
         }
 
+        if (optimization && Object.keys(optimization).length > 0) {
+          customConfig.optimization = optimization;
+        }
+
         if (devServer && Object.keys(devServer).length > 0) {
 
           if (devServer.host) {

packages/cli/src/lifecycles/graph.js

@@ -76,6 +76,16 @@ const createGraphFromPages = async (pagesDir, config) => {
                 // set <title></title> element text, override with markdown title
                 title = title || '';
 
+                // create webpack chunk name based on route and page name
+                const routes = route.lastIndexOf('/') === route.length - 1 && route.lastIndexOf('/') > 0
+                  ? route.substring(1, route.length - 1).split('/')
+                  : route.substring(1, route.length).split('/');
+                let chunkName = 'page';
+
+                routes.map(subDir => {
+                  chunkName += '--' + subDir;
+                });
+
                 /*
                 * Variable Definitions
                 *----------------------
@@ -90,6 +100,7 @@ const createGraphFromPages = async (pagesDir, config) => {
                 * imported into app.js root component
                 * title: the head <title></title> text
                 * meta: og graph meta array of objects { property/name, content }
+                * chunkName: generated chunk name for webpack bundle
                 */
                 const customData = attributes;
 
@@ -135,7 +146,8 @@ const createGraphFromPages = async (pagesDir, config) => {
                   fileName,
                   relativeExpectedPath,
                   title,
-                  meta
+                  meta,
+                  chunkName
                 };
               }
 

packages/cli/src/lifecycles/scaffold.js

@@ -39,7 +39,7 @@ const writePageComponentsFromTemplate = async (compilation) => {
     let relPageDir = file.filePath.substring(context.pagesDir.length, file.filePath.length);
     let pagePath = '';
     const pathLastBackslash = relPageDir.lastIndexOf('/');
-    
+
     pagePath = path.join(context.scratchDir, file.fileName); // non-nested default
 
     if (pathLastBackslash !== 0) {
@@ -71,30 +71,25 @@ const writePageComponentsFromTemplate = async (compilation) => {
 
 };
 
-const writeListImportFile = async (compilation) => {
-  const importList = compilation.graph.map(file => {
-    return `import ${file.relativeExpectedPath};\n`;
-  });
-
-  // Create app directory so that app-template relative imports are correct
-  const appDir = path.join(compilation.context.scratchDir, 'app');
-
-  await fs.ensureDir(appDir);
-  return await fs.writeFile(path.join(appDir, './list.js'), importList.join(''));
-};
-
 const writeRoutes = async(compilation) => {
   return new Promise(async (resolve, reject) => {
     try {
       let data = await fs.readFile(compilation.context.appTemplatePath, 'utf8');
 
       const routes = compilation.graph.map(file => {
-        return `<lit-route path="${file.route}" component="eve-${file.label}"></lit-route>\n\t\t\t\t`;
+        return `<lit-route
+          path="${file.route}"
+          component="eve-${file.label}"
+          .resolve="\${() => import(/* webpackChunkName: "${file.chunkName}" */ ${file.relativeExpectedPath})}"
+          loading="eve-loading"></lit-route>\n\t\t\t\t`;
       });
 
       const result = data.toString().replace(/MYROUTES/g, routes.join(''));
+      // Create app directory so that app-template relative imports are correct
+      const appDir = path.join(compilation.context.scratchDir, 'app');
 
-      await fs.writeFile(path.join(compilation.context.scratchDir, 'app', './app.js'), result);
+      await fs.ensureDir(appDir);
+      await fs.writeFile(path.join(appDir, './app.js'), result);
 
       resolve();
     } catch (err) {
@@ -127,9 +122,6 @@ module.exports = generateScaffolding = async (compilation) => {
       console.log('Generate pages from templates...');
       await writePageComponentsFromTemplate(compilation);
 
-      console.log('Writing imports for md...');
-      await writeListImportFile(compilation);
-
       console.log('Writing Lit routes...');
       await writeRoutes(compilation);
 

packages/cli/src/templates/app-template.js

@@ -15,7 +15,6 @@ const store = createStore((state) => state,
 );
 
 import '../index/index';
-import './list';
 
 connectRouter(store);
 
@@ -59,7 +58,7 @@ class AppComponent extends LitElement {
     meta.forEach(metaItem => {
       const metaType = metaItem.rel // type of meta
         ? 'rel'
-        : metaItem.name 
+        : metaItem.name
           ? 'name'
           : 'property';
       const metaTypeValue = metaItem[metaType]; // value of the meta
@@ -72,16 +71,16 @@ class AppComponent extends LitElement {
         meta.setAttribute('rel', metaTypeValue);
         meta.setAttribute('href', metaItem.href);
       } else {
-        const metaContent = metaItem.property === 'og:url' 
-          ? `${metaItem.content}${currentPage.link}` 
+        const metaContent = metaItem.property === 'og:url'
+          ? `${metaItem.content}${currentPage.link}`
           : metaItem.content;
 
         meta.setAttribute(metaType, metaItem[metaType]);
         meta.setAttribute('content', metaContent);
       }
 
       const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`);
-      
+
       // rehydration
       if (oldmeta) {
         header.replaceChild(meta, oldmeta);

packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js

@@ -15,7 +15,6 @@ const store = createStore(
   compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
 
 import '../index/index';
-import './list';
 
 connectRouter(store);
 

www/components/loading/loading.js

@@ -0,0 +1,25 @@
+import { html, LitElement } from 'lit-element';
+import './spinner';
+
+class loading extends LitElement {
+  render() {
+    return html`
+      <style>
+        div {
+          padding-top:50px;
+          height: calc(100vh - 110px);
+        }
+        h1 {
+          padding: 30px;
+          text-align:center;
+        }
+      </style>
+      <div>
+        <eve-spinner size="100px"></eve-spinner>
+        <h1>Loading...</h1>
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-loading', loading);

www/components/loading/spinner.js

@@ -0,0 +1,38 @@
+import { html, LitElement } from 'lit-element';
+
+class spinner extends LitElement {
+
+  static get properties() {
+    return {
+      size: {
+        type: String
+      }
+    };
+  }
+
+  render() {
+    return html`
+      <style>
+        .spinner {
+          width: ${this.size};
+          padding: 10px;
+          margin-left:auto;
+          margin-right:auto;
+        }
+      </style>
+      <div class="spinner">
+        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="${this.size}"
+         height="${this.size}" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+          <path fill="#000"
+          d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"
+          transform="rotate(190.358 25 25)">
+          <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
+          </path>
+        </svg>
+      </div>
+    `;
+  }
+}
+
+customElements.define('eve-spinner', spinner);