[RFC] Route Based Code Splitting

[thescientist13]

Type of Change

• New Feature Request (RFC)
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

As it stands now it looks like Greenwood only creates on index.js. Would like to look into how we can possibly do route based code splitting, or I guess in the context of this project, template based code splitting?

Details

In particular this is a potential concern until larger projects can be tested because if ALL the content / code ends up in index.js then it will absolutely crush larger projects even though currently the Greenwood website scores well.

Ideally we should be able to configure this all through webpack.
https://webpack.js.org/plugins/split-chunks-plugin/

We should also want to handle / consider splitting out vendor code into it's own chunk too.

[hutchgrant]

lit-redux-router allows for lazy loading components, I know because I contributed that functionality to that project(only time I've been able to say that). With webpack, we can use dynamic imports

app.js

import { navigate } from 'lit-redux-router';
import store from './store.js';

class MyApp extends LitElement {
  render() {
    return html`
      <div class="app-content">
        <lit-route
          path="/docs"
          component="my-docs"
          .resolve="${() => import('./docs.js')}"
          loading="my-loading"
        ></lit-route>
      </div>
    `;
  }
}
customElements.define('my-app', MyApp);

class MyLoading extends LitElement {
  render() {
    return html`
      <style>
        h1 {
          margin-top: 0;
          margin-bottom: 16px;
        }
      </style>
      <h1>Loading...</h1>
    `;
  }
}

This will display a loading component, while we wait for the new page component to resolve.

webpack.config.common.js

    output: {
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js',
      publicPath: 'dist/',
      path: path.resolve(__dirname, 'dist'),
    },

This will split our bundle into chunks.

In order to use that, we would have to adjust the scaffold to dynamically import each page component in addition to webpack.

[thescientist13]

Yeah, was thinking something like that as well but maybe grouped by top level route, e.g. in our case a bundle for:

• vendor / common / shared
• home
• docs
• about
• etc

Will be really exciting to implement this to coincide with data in / data out combo. 🙌