Any plans for code splitting?

[supa-freak]

I saw that there doesnt seem to be any code splitting in place, resulting in a pretty huge javascript bundle which will be loaded on every page even if there is no vue.js on the page.
Do you have any solution to enable code splitting with different bundles depending on whats needed on every page?

[sergejcodes]

Since it's not a pure js application I'm not sure how to easily achieve code-splitting here. If anybody has any suggestions feel free to comment.

[bryandonmarc]

Hi! I came across this discussion and this is pretty easy to implement using Webpack Code Splitting

If you want an example, here's what I did with my project (Note: I renamed index.js to main.js) :

webpack.common.js

module.exports = {
  // ...,
  entry: {
    // ...,
    main: path.resolve(__dirname, "../../src/js/main/main.js"),
    search: path.resolve(__dirname, "../../src/js/search/search.js"),
    collection: path.resolve(__dirname, "../../src/js/collection/collection.js"),
  },
  output: {
    // ...,
    filename: "[name].bundle.js",
  },
  // ...,
}

Afterwards, at the end of theme.liquid, I replaced this block of code

    <!-- webpack bundle -->
    <script src="{{ 'bundle.js' | asset_url }}" defer="defer"></script>

with this

    <!-- webpack bundle -->
    <script src="{{ 'main.bundle.js' | asset_url }}" defer="defer"></script>
    
    {% if request.page_type == 'collection' %}
      <script src="{{ 'collection.bundle.js' | asset_url }}" defer="defer"></script>
    {% endif %}

    {% if 
        settings.predictive_search_enabled and request.page_type == 'search' 
        or 
        settings.predictive_search_enabled and settings.header_modal_search_enabled 
      %}
      <script src="{{ 'search.bundle.js' | asset_url }}" defer="defer"></script>
    {% endif %}

You can implement whichever logic you want in Liquid to conditionally include the bundles.