optimize webpack bundles

app/javascript/application.js

@@ -1,14 +1,11 @@
 import '@hotwired/turbo-rails'
 
-import { createApp, reactive } from 'vue'
-
 import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'
 import TurboModal from './elements/turbo_modal'
 import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
-import TemplateBuilder from './template_builder/builder'
 import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
@@ -34,8 +31,16 @@ window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 
 window.customElements.define('template-builder', class extends HTMLElement {
-  connectedCallback () {
-    this.appElem = document.createElement('div')
+  async connectedCallback () {
+    const [
+      { createApp, reactive },
+      { default: TemplateBuilder }
+    ] = await Promise.all([
+      import('vue'),
+      import('./template_builder/builder')
+    ])
+
+    this.appElem = this.children[0]
 
     this.app = createApp(TemplateBuilder, {
       template: reactive(JSON.parse(this.dataset.template))
@@ -50,6 +55,5 @@ window.customElements.define('template-builder', class extends HTMLElement {
 
   disconnectedCallback () {
     this.app?.unmount()
-    this.appElem?.remove()
   }
 })

app/javascript/elements/file_dropzone.js

@@ -1,5 +1,3 @@
-import { DirectUpload } from '@rails/activestorage'
-
 import { actionable } from '@github/catalyst/lib/actionable'
 import { target, targetable } from '@github/catalyst/lib/targetable'
 
@@ -11,6 +9,8 @@ export default actionable(targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
+    import('@rails/activestorage')
+
     this.addEventListener('drop', this.onDrop)
 
     this.addEventListener('dragover', (e) => e.preventDefault())
@@ -39,6 +39,8 @@ export default actionable(targetable(class extends HTMLElement {
   async uploadFiles (files) {
     this.toggleLoading()
 
+    const { DirectUpload } = await import('@rails/activestorage')
+
     await Promise.all(
       Array.from(files).map(async (file) => {
         const upload = new DirectUpload(

app/javascript/submission_form/completed.vue

@@ -45,7 +45,6 @@
 
 <script>
 import { IconCircleCheck, IconMail, IconDownload, IconInnerShadowTop } from '@tabler/icons-vue'
-import confetti from 'canvas-confetti'
 
 export default {
   name: 'FormCompleted',
@@ -67,7 +66,9 @@ export default {
       isDownloading: false
     }
   },
-  mounted () {
+  async mounted () {
+    const { default: confetti } = await import('canvas-confetti')
+
     confetti({
       particleCount: 50,
       startVelocity: 30,

app/javascript/submission_form/dropzone.vue

@@ -47,7 +47,6 @@
 </template>
 
 <script>
-import { DirectUpload } from '@rails/activestorage'
 import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
 export default {
@@ -87,6 +86,9 @@ export default {
       return 'el' + Math.random().toString(32).split('.')[1]
     }
   },
+  mounted () {
+    import('@rails/activestorage')
+  },
   methods: {
     onDropFiles (e) {
       this.uploadFiles(e.dataTransfer.files)
@@ -103,6 +105,8 @@ export default {
     async uploadFiles (files) {
       this.isLoading = true
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       const blobs = await Promise.all(
         Array.from(files).map(async (file) => {
           const upload = new DirectUpload(

app/javascript/submission_form/signature_step.vue

@@ -40,8 +40,6 @@
 </template>
 
 <script>
-import SignaturePad from 'signature_pad'
-import { DirectUpload } from '@rails/activestorage'
 import { IconReload } from '@tabler/icons-vue'
 
 export default {
@@ -75,10 +73,13 @@ export default {
       isSignatureStarted: false
     }
   },
-  mounted () {
+  async mounted () {
     this.$refs.canvas.width = this.$refs.canvas.parentNode.clientWidth
     this.$refs.canvas.height = this.$refs.canvas.parentNode.clientWidth / 3
 
+    import('@rails/activestorage')
+    const { default: SignaturePad } = await import('signature_pad')
+
     this.pad = new SignaturePad(this.$refs.canvas)
 
     this.pad.addEventListener('beginStroke', () => {
@@ -94,11 +95,13 @@ export default {
 
       this.isSignatureStarted = false
     },
-    submit () {
+    async submit () {
       if (this.modelValue) {
         return Promise.resolve({})
       }
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       return new Promise((resolve) => {
         this.$refs.canvas.toBlob((blob) => {
           const file = new File([blob], 'signature.png', { type: 'image/png' })

app/javascript/template_builder/upload.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import { DirectUpload } from '@rails/activestorage'
 import { IconUpload } from '@tabler/icons-vue'
 
 export default {
@@ -49,10 +48,15 @@ export default {
       return 'el' + Math.random().toString(32).split('.')[1]
     }
   },
+  mounted () {
+    import('@rails/activestorage')
+  },
   methods: {
     async upload () {
       this.isLoading = true
 
+      const { DirectUpload } = await import('@rails/activestorage')
+
       const blobs = await Promise.all(
         Array.from(this.$refs.input.files).map(async (file) => {
           const upload = new DirectUpload(