title: Rails 6 + Webpacker Lazy Loading
body: <p>I'm running <code>rails assets:precompile</code> and it outputs this:</p>
  
  <pre><code>WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
      This can impact web performance.
      Assets: 
        js/application-c4e0541a90e01b47fbfe.js (1.21 MiB)
        js/chartkick-b109b176a3de896848c7.js (657 KiB)
        js/datatables-fca8769ee16df57bdc4a.js (296 KiB)
        js/application-c4e0541a90e01b47fbfe.js.gz (305 KiB)
        js/datatables-fca8769ee16df57bdc4a.js.map.gz (482 KiB)
        js/chartkick-b109b176a3de896848c7.js.map.gz (493 KiB)
        js/application-c4e0541a90e01b47fbfe.js.map.gz (1.09 MiB)
  
  WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
  Entrypoints:
    application (1.21 MiB)
        js/application-c4e0541a90e01b47fbfe.js
    chartkick (657 KiB)
        js/chartkick-b109b176a3de896848c7.js
    datatables (296 KiB)
        js/datatables-fca8769ee16df57bdc4a.js
  
  
  WARNING in webpack performance recommendations: 
  You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
  For more info visit https://webpack.js.org/guides/code-splitting/
  </code></pre>
  
  <p>I've been looking at lazy loading but can't find anything about rails (I'm super new to webpacker, js, etc).
  This <a href="https://webpack.js.org/guides/lazy-loading/" rel="nofollow noreferrer">link</a>, for example, explains about splitting code and lazy loading, but I can't figure out how to call that on my super simple code.</p>
  
  <p>Here's an example of the datatables code I have:</p>
  
  <pre><code>//Global setting and initializer
  // Add DataTables jQuery plugin
  require('imports-loader?define=&gt;false!datatables.net')(window, $)
  require('imports-loader?define=&gt;false!datatables.net-select')(window, $)
  require('imports-loader?define=&gt;false!datatables.net-bs4')(window, $)
  require('imports-loader?define=&gt;false!datatables.net-select-bs4')(window, $)
  
  // Load datatables styles
   import 'datatables.net-bs4/css/dataTables.bootstrap4.css'
   import 'datatables.net-select-bs4/css/select.bootstrap4.css'
  
  $(document).on('turbolinks:load', () =&gt; {
    $(document.body).on('click', '#check_all', () =&gt; {
      var checkBoxes = $('input[type="checkbox"]')
      checkBoxes.prop("checked", !checkBoxes.prop("checked"))
    })
  })
  
  
  // init on turbolinks load
  $(document).on('turbolinks:load', function() {
    if (!$.fn.DataTable.isDataTable(".datatable")) {
      $(".datatable").DataTable();
    }
  });
  
  // turbolinks cache fix
  $(document).on('turbolinks:before-cache', function() {
    var dataTable = $($.fn.dataTable.tables(true)).DataTable();
    if (dataTable !== null) {
      dataTable.destroy();
      return dataTable = null;
    }
  });
  </code></pre>
  
  <p>Would love to get some pointers on this, it's clogging my app up and the app crashes.
  Thanks!</p>