I’m currently in a process of optimising the client part of a liveview app and wondered if anyone had tried using lazy loading with liveview.

My current approach is:

1. Import heavy dependencies like charting libs with dynamic imports in liveview hooks:

async function createChart(config, el) {
  const [am4core, am4charts] = await Promise.all([
    import(/* webpackChunkName: "amcharts4-core" */ "@amcharts/amcharts4/core"),
    import(/* webpackChunkName: "amcharts4-charts" */ "@amcharts/amcharts4/charts"),
  ]);

  return am4core.createFromConfig(config, el, am4charts.XYChart);
}

const ChartHook = {
  config() {
    return JSON.parse(this.el.dataset.config);
  },

  async mounted() {
    this.chart = await createChart(this.config(), this.el);
  },

  beforeDestroy() {
    this.chart.dispose();
  },
};

export default ChartHook;

2. Add chunkFilename: "[id].[contenthash].js" option to webpack config to allow for cache busting when the chunks change, note that this doesn’t affect the filenames of the entry points like app.js since the hash there is added by mix phx.digest

3. (Optional) Compress /\.(js|css|svg)$/ via webpack using brotli, because why not (and in part thanks to #3840). This would mostly affect the chunks.

4. Update Plug.Static options in endpoint.ex to include gzip: true, brotli: true