Detailed explanation of lazy loading examples of vue routing

This article mainly introduces the implementation method of lazy loading of vue routing. We can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed. Hope it helps everyone.

1. component can be an arrow function, we can use dynamic import syntax to define code chunking points;

2. If you want to see it in the network To the name of the dynamically loaded component, you can add webpackChunkName;

3. At the same time, add chunkFileName

# under the filename in the output in webpack.base.conf.js

##Code

// router里面的index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'home',
   /* 
    * 使用动态组件，component可以是一个箭头函数
    * @表示src目录
    * 如果想在network里面看到动态加载的组件名字，可以加webpackChunkName，同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName
    * network里面动态加载模块名称
    */
   
   component: () => import(/* webpackChunkName: 'home' */'@/pages/Homes')
  
   
  },
  {
   path: '/todos',
   name: 'Todos',
   component: () => import(/* webpackChunkName: 'todo' */'@/pages/Todos')
  }
 ]
})

Note that @ above represents the current src directory. For details, please refer to the webpack configuration

webpack.base.conf.js里面添加 chunkFilename: '[name].js'

output: {
 path: config.build.assetsRoot,
 filename: '[name].js',
 // 需要配置的地方
 chunkFilename: '[name].js',
 publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
}

Analysis

Created two components, home and todos, using routing lazy loading. After configuration, we executed npm run dev to run the project, opened the network and refreshed After a while, we will find that home.js is loaded. We will find that the name is the same as the webpackChunkName defined above. At the same time, clicking todos will load todo.js. This is a simple use of lazy loading of routes.

Others

In main.js, we can use the template syntax or the render function at the entry of the project

new Vue({
 el: '#app',
 router,
 components: { App },
 /*
 * 这里使用的template的语法
 * 也可以使用render函数,直接return一个html结构
 */
 // template: &#39;<App/>&#39;
 render() {

  return (
   <p>
    <App></App>
   </p>
  )
 } 
})

Related recommendations:

The principle and implementation of jquery’s lazy loading

Using images to lazily load vue in vue -lazyload plug-in

About Vue code splitting and lazy loading

The above is the detailed content of Detailed explanation of lazy loading examples of vue routing. For more information, please follow other related articles on the PHP Chinese website!