Activate a module within a Vuex action only upon dispatching

Question

Activate a module within a Vuex action only upon dispatching

Is there a way to import a package for use in a Vuex Action only when the Action is dispatched, in order to reduce the size of my entry bundle?

Here's what I've tried:

export const actions = {
  async createNewBin(store, bin) {
    const firebase = require('firebase/app');
    require('firebase/firestore');

    const collectionRef = firebase.firestore().collection('bins');

    try {
      const docRef = await collectionRef.add(bin);
      return docRef;
    } catch (e) {
      return e;
    }
  }
}

The firebase/firestore package is currently included in my entry file, but I want to avoid that.

javascript vue.js vuex nuxt.js

Answer 1

Answer №1

Here is a solution that should be effective: https://webpack.js.org/guides/code-splitting/#dynamic-imports

const actions = {
    async createNewBin(store, bin) {
        const { default: firebase } = await import(
            /* webpackChunkName: "firebase" */ 'firebase')

        // Ensure that firebase is only initialized once.
        if (!firebase.apps.length) {
            firebase.initializeApp({
                // your init options
            });
        }

        const collectionRef = firebase.firestore().collection('bins');

        try {
            const docRef = await collectionRef.add(bin);
            return docRef;
        } catch (error) {
            return error;
        }
    },
}

Answer 2

Here is a solution that should be effective: https://webpack.js.org/guides/code-splitting/#dynamic-imports

const actions = {
    async createNewBin(store, bin) {
        const { default: firebase } = await import(
            /* webpackChunkName: "firebase" */ 'firebase')

        // Ensure that firebase is only initialized once.
        if (!firebase.apps.length) {
            firebase.initializeApp({
                // your init options
            });
        }

        const collectionRef = firebase.firestore().collection('bins');

        try {
            const docRef = await collectionRef.add(bin);
            return docRef;
        } catch (error) {
            return error;
        }
    },
}

Answer 3

Answer №2

For more information regarding this method, feel free to explore the following link:

Exploring webpack for lazy loading: When and when not to use

In simpler terms, you can consider implementing a solution similar to Eric's suggestion using async/await.

const { default: myModule } = await import(/* webpackChunkName: "myModule" */ 'myModule')

Alternatively, you can opt for a Promise-based approach like demonstrated below:

if(needToLoadMyBundle){
    import('myModule').then( myModule =>{
        // perform actions with myModule.default
    });
}

Answer 4

For more information regarding this method, feel free to explore the following link:

Exploring webpack for lazy loading: When and when not to use

In simpler terms, you can consider implementing a solution similar to Eric's suggestion using async/await.

const { default: myModule } = await import(/* webpackChunkName: "myModule" */ 'myModule')

Alternatively, you can opt for a Promise-based approach like demonstrated below:

if(needToLoadMyBundle){
    import('myModule').then( myModule =>{
        // perform actions with myModule.default
    });
}

Activate a module within a Vuex action only upon dispatching

Answer №1

Answer №2

Similar questions

"Interactive jQuery feature allows users to edit table content live with the ability to update and delete data via

Using Special Characters in React JS Applications

Dealing with cross-origin error issues when using json.parse in React / MERN development

The event listener for browser.menus.onClicked is dysfunctional in Firefox

Switch to a different element by rolling over one

Extracting information from an ENORMOUS Array

Verify whether the initial value is distinct from the subsequent one using AJAX

`"Type is invalid" error occurring with component after importing it into a different project``

Send data from input to controller without using $scope

Strip the CSS styling from an image (the CSS being included in the generated code)

What is the best way to retrieve data from the next page in a Protractor test?

Content formatted with a gap

What do you believe to be superior: Vue UI design?

Switch image on click (toggle between pause and play buttons)

How to implement the Ionic ToastController without being confined to a Vue instance

Adding or removing a class using Jquery based on the condition of form validation

Looking to transform this PHP function into a jQuery function that generates all the possible combinations of values in an array?

Leveraging the power of jquery-tmpl with the responseText

Linux web server blocking requests across different domains, even with correct Access-Control-Allow-Origin headers set

Can you explain the distinction between browser.sleep() and browser.wait() functions?