CODEWITHSUNDEEP
javascriptwebpackvue.jscode-splitting
dendog
dendog

Reputation: 3338

When would webpack's import() not create a new file?

I am using the webpack import statemement to load my UI based on some logic within a promise chain:

initLoader()
  .then( loaderData => initCmp(loaderData) )
  .then( () => initApi )
  .then( () => import(/* webpackChunkName: "ui" */ './ui/main.js') )
  .then( (app) => app.default(1) )
  .catch();

This works fine, but webpack is not creating a new chunk / file based on this code split point. I cannot seem to find any resources which explain in depth how this feature works.

I am importing a default export function which renders the UI, the file looks like:

import Vue from 'vue';
import Vuikit from 'vuikit';

// import and make global all components
import App from './App.vue';
Vue.component('app-init', App);

// creating a root in the DOM for the app to attach to, when called
const divToAttachApp = document.createElement('div');
divToAttachApp.setAttribute('id', 'cmp-app');
document.body.appendChild(divToAttachApp);

// create the app instance and attach it to the DOM in a hidden state
const vm = new Vue(App).$mount('#cmp-app');

// this function is called to load the UI, it accepts the clientId
function renderVueApp(clientId) {
  return new Promise((resolve, reject) => {
    if (vm) {
      vm.$store.dispatch('setClientId', parseInt(clientId));
      vm.$store.commit('changeShowState', true);
      EventBus.$on('save-selection', value => {
        console.log(`CMP-UI :: Resolving Promise (save-selection): ${JSON.stringify(value)}`);
        resolve(value);
      });
    } else {
      console.error(`CMP-UI :: No App Present`);
    }
  });
}

export default renderVueApp;

I am wondering, does webpack analyse dependencies further down the tree and not make a code split point?

At this stage I am not worried if I am loading some dependency twice, I am just trying to get the dynamic code split to function and can work on cleaning the dependencies later.

EDIT: Webpack config - I am using v4

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath : isProduction ? PRODUCTION_HOST : '/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.bundle.js',

  },

EDIT 2: Just to show that my setup is fine, when loading async components from vuejs, as per the below all works fine:

Vue.component('Modal', () => import(/* webpackChunkName: "modal" */ './components/Modal.vue'));

Thanks in advance.

Upvotes: 0

Views: 832

Answers (1)

dendog
dendog

Reputation: 3338

It seems webpack is smarter than I!

The issue was that I had already elsewhere in my app imported this specific module into the dependency tree.

The outcome was that the import statement was working, but it was not creating a new chunk.

Would be nice if webpack could maybe point this out, in large projects I can see this happening quite often during a refactor.

Upvotes: 2

Related Questions