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

Make sure to remain in the same division area when refreshing the page

How can I make sure to consider the scrollbar when using viewport width units?

What are the advantages of compiling our CSS and JS files in Laravel? How does it benefit us?

Setting up jsonReader for jqGrid Configuration

Axios is returning a 401 (Unauthorized) error when attempting to retrieve user data from a React frontend and pass it to DRF Social Oauth2. Strangely, the same process

Retrieve all the Firebase keys within a Vue script using Vue-Firebase

"Bringing the power of JavaScript to your WordPress

Generating a dropdown menu in HTML using JSON entities

Guide to implementing if else statements with Protractor

Manipulate a value using JavaScript

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Struggling with populating a dropdown in MVC with JSON data fetched from an API using jQuery/JavaScript

Determining User Login Status in Laravel using jQuery

Running javascript code after the completion of the render method in Reactjs

Tips for positioning a div relative to another div while controlling its z-index

The getMonthlyBalances function is providing inaccurate results when calculating stock balances

Determining if a URL links to an image when the file extension is not informative

The presence of a default value within an Angular ControlValueAccessor triggers the dirty state due to

I'm looking to learn how to implement the delete method in an API using TypeScript. Can anyone help me out

Mastering the Rejection of Promises in Javascript with Graceful Elegance