optimize webpack bundles

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