Jquery 轨道6+；Webpacker延迟加载

我正在运行

railsassets:precompile

，它会输出以下内容：

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/

我一直在研究延迟加载，但找不到任何关于rails的信息（我对webpacker、js等非常陌生）。 例如，这解释了分裂代码和延迟加载，但我不知道如何在我的超级简单代码中调用它

下面是我的datatables代码示例：

//Global setting and initializer
// Add DataTables jQuery plugin
require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-select')(window, $)
require('imports-loader?define=>false!datatables.net-bs4')(window, $)
require('imports-loader?define=>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', () => {
  $(document.body).on('click', '#check_all', () => {
    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;
  }
});

我很想得到一些关于这方面的建议，它正在阻塞我的应用程序，应用程序崩溃。

---

谢谢

要添加动态导入，您可能需要对现有代码进行一些更改：

提取用于有条件初始化插件实例的函数

对每个datatables模块或导入这些模块的单独文件使用

import（）.then（）

动态导入语句

提取初始值设定项函数 因为您将异步导入数据表，所以还不能指望它被加载。这只是一个例子，但是处理这个问题的一种方法是在任何您想要进行datatables初始化的地方使用一个可重用的函数（可能还有另一种方法用于“before cache”钩子），如果datatables还没有加载，这个函数将正常工作

function initializeDatatables() {
  if (!$.fn.DataTable) return;

  if (!$.fn.DataTable.isDataTable(".datatable")) {
    $(".datatable").DataTable();
  }
}

使用动态导入 由于您有四个单独的导入，您可以尝试将它们作为一个“块”从单独的文件导入：

// app/javascript/datatables.js
require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-select')(window, $)
require('imports-loader?define=>false!datatables.net-bs4')(window, $)
require('imports-loader?define=>false!datatables.net-select-bs4')(window, $)

// your original initializer file
import('./datatables').then(initializeDatatables)

$(document).on('turbolinks:load', initializeDatatables);

---

你也可以尝试使用这个网页，这样你就可以把你的JS分成不同的块，但这是一个单独的主题。

非常感谢你的详细回答！我完全按照您所说的做了，但是包括了一个console.log，它记录了加载的时间，甚至在没有数据表的页面上，它仍然加载它。我错过什么了吗？还要感谢有关splitchunks的提示：）如果您希望datatables块仅在带有.datatable类的页面上加载，那么您希望使用类似以下伪代码的内容包装导入函数：“在加载DOM时，如果$（'.datatable'）.length，导入（'./datatables'）。然后…”