Lazy load

[qxygene]

const Cropper = () => import(/webpackChunkName: "cropper"/ "vue-advanced-cropper");

It seems not working.

[qxygene]

const Cropper = () => import(/webpackChunkName: "cropper"/ "vue-advanced-cropper").then( (module) => { console.log(module); return module.Cropper; } );

now it works. it saved me 82kb while build.

[Norserium]

@qxygene, hello!

It's the normal behavior. The explanation is pretty simple:

1. The import dynamically load a module, not one of named exports. Therefore to get the named export Cropper you need to process the promise result:

   const Cropper = () =>
   import(/*webpackChunkName: "cropper"*/ "vue-advanced-cropper").then(module => module.Cropper)

2. The result of the code above is the literally async component. The function that returns Promise whose value is the component options. So you can just pass it to the components list:

   {
   /* ... */
   components: {
      Cropper
   }
   }

[Norserium]

@qxygene, is your issue still actual?

[qxygene]

yes it is

[Norserium]

@qxygene. what's wrong? The example above should work.

[Norserium]

@qxygene, any news?

[qxygene]

version 1.10.1 fixed the issue. thank you.

[Norserium]

@qxygene, frankly, I don't get how it could solve your issue, but all is well that ends well.

I close issue then.