@ChristophWurst, I found your blog post regarding Vue vs CSP under NC. As I am just working on the cookbook app, stumbled upon your post.
To be precise, we are currently building a single file vue.js
from the sources. As this grows with each dependency and all new components/functionalities of the app, we are far beyond the suggested max size for a chunk (suggestions of webpack builder). As Vue allows for dynamic loading of dependencies, I wanted to give it a try.
The following change for example sources the import of the Multiselect
component out. From the webpack perspective, this works well and files in js
are generated with the individual chunks.
diff --git a/src/components/EditMultiselect.vue b/src/components/EditMultiselect.vue
index 9933cab..e591be4 100644
--- a/src/components/EditMultiselect.vue
+++ b/src/components/EditMultiselect.vue
@@ -10,7 +10,7 @@
</template>
<script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+Multiselect = import ('@nextcloud/vue/dist/Components/Multiselect')
export default {
name: "EditMultiselect",
components: {
The problem is now in the browser the CSP. Although, we have a setting in the main.js
start script to set the bounce, the delayed loading of the chunks is prohibited. I understood your post that the webpack was able to load additionally needed chunks later if the setting for __webpack_nonce__
was set accordingly.
Do you know if using chunks is possible in general? Do you know of a concrete app that had it managed to compare the settings? Or do you maybe see the issue directly?