optimize webpack bundles

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' })