Shulou(Shulou.com)06/01 Report--

This article mainly explains how to solve the problem of lazy loading of vue asynchronous components and components. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the problem of lazy loading of vue asynchronous components and components.

Vue Asynchronous components and lazy loading of components

When writing a project, you need to dynamically configure the routing menu, and all the menus are generated through configuration, which means that the path of the menu (the path of a string in the vue development project) needs to be loaded asynchronously, but since you are not very familiar with webpack's import, there is a hole that needs to be filled in.

Cause analysis of the error _ import.jsmodule.exports = file = > () = > import (file)

But the reason why this method is wrong is:

When webpack compiles es6 to dynamically introduce import (), you cannot pass in variables, such as dir = 'path/to/my/file.js'; import (dir), but the string import (' path/to/my/file.js'), because the current implementation of webpack cannot be completely dynamic.

Solution one

You can use a string template to provide some information to webpack;, such as import (. / path/$ {myFile}), so that all modules under. / path will be compiled at compile time, but will not be loaded until the runtime determines the value of myFile, thus realizing lazy loading.

Solution two function lazyLoadView (AsyncView) {const AsyncHandler = () = > ({component: AsyncView, / / A component to use while the component is loading. Loading: require ('@ / view/system/Loading.vue') .default, / / A fallback component in case the timeout is exceeded / / when loading the component. Error: require ('@ / view/system/Timeout.vue'). Default, / / Delay before showing the loading component. / / Default: 200 (milliseconds). Delay: 200, / / Time before giving up trying to load the component. / / Default: Infinity (milliseconds). Timeout: 10000}); return Promise.resolve ({functional: true, render (h, {data, children}) {/ / Transparently pass any props or children / / to the view component. Return h (AsyncHandler, data, children);}} const My = () = > lazyLoadView (import ('@ / view/My.vue')); const router = new VueRouter ({routes: [{path:'/ my', component: My}]})

The lazy loading effect of dynamic components can be solved by the above two methods.

Vue lazy load component path is incorrect

Recently, when using VueRouter's lazy load component.

Const routes = [{path:'/', component: App}, {path:'/ category', component: resolve = > {require (['. / components/Category.vue'], resolve)}}]

But when loading / category, I found that there was an error.

It turns out that webpack will load this lazy load into a separate js, which defaults to

0.app.js 1.app.js... Loaded sequentially

Through simple debug, it is found that the path of 0.app.js is incorrect.

It can be solved through the setting of webpack (the laravel I use, the configuration can be modified according to the situation)

Elixir.webpack.mergeConfig ({module: {loaders: [{test: /\ .css /, loader: "styleroomcss"}]}, output: {publicPath: "js/"}})

Configure the publicPath under output.

At this point, I believe you have a deeper understanding of "how to solve the problem of lazy loading of vue asynchronous components and components". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.