How does vue use lazy loading in methods?

methods:{
    test(){
      // 
      import { test } from "./test.js";
      
      EventHub.$emit("emitevent", test );
    }
  }

test.js

let test = "hello";
export {
    test 
};

looked at asynchronous components but didn"t quite understand how to use them.

excuse me, how do I use lazy loading in a method?

Apr.02,2021

it feels like this is the job of webpack, and it has nothing to do with vue. I think some of your needs in webpack documents are a little similar. Take a look at
lazy add-on: ides/lazy-loading/" rel=" nofollow noreferrer "> https://www.webpackjs.com/gui.

.

clipboard.png

: ides/code-splitting/-sharp%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5-dynamic-imports-" rel="nofollow noreferrer">https://www.webpackjs.com/gui...

clipboard.png


first of all, the subject should understand the difference between the import of es6 and the previous commonJs.
import is executed statically, executed at compile time, and keep this concept in mind before the code runs. So, this directly leads to the inability of import to use expressions and variables. To put it simply, grammatical structures that can only get results at run time are not available.

as for what you said about lazy loading, it is compared to on-demand loading, isn't it? To see the webpack, you use, please refer to the official documentation tutorials of webpack and vue.

Menu