Rails Stimulus 在使用 Webpack 和 ES build 的时候怎么做 lazyLoading?

willx · 2023年04月21日 · 最后由 ericguo 回复于 2023年04月22日 · 396 次阅读

importmap 那套东西没有代码提示,用着实在是有点难受,换成前端构建工具之后又不知道怎么做到 lazyLoadControllersFrom 的效果。

你需要使用 shakapacker (webpacker 的后续),这样才能用 webpack 5 的 chuck 方式分包方式打包。

在需要的 html.erb 页面上引入需要的延迟加载组件。

<% content_for :head do %>
  <%= append_stylesheet_pack_tag 'selectize' %>
  <%= append_javascript_pack_tag 'selectize' %>
<% end %>

app/javascript/packs/selectize.js

import $ from 'jquery'
global.$ = $
global.jQuery = $
import '@selectize/selectize/dist/js/selectize';
require("lazy_controllers/selectizes");

app/javascript/lazy_controllers/selectizes.js:

import { Controller } from "@hotwired/stimulus"

Stimulus.register("selectizes", class extends Controller {
  static targets = [ "select" ]

  connect() {
    $(this.selectTarget).selectize({
      plugins: ["remove_button"]
    });
  }

  disconnect() {
    const need_destroy = $(this.selectTarget)[0].selectize;
    if(need_destroy) {
      need_destroy.destroy();
    }
  }
});

具体模版

需要 登录 后方可回复, 如果你还没有账号请 注册新账号