vue路由懒加载

DrizzleX 发布于2019-08-22 15:17 / 2212人阅读

摘要：的路由懒加载我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。这就是路由懒加载的简单使用。

vue的路由懒加载

我们可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

component可以是一个箭头函数，我们可以使用动态 import语法来定义代码分块点；

如果想在network里面看到动态加载的组件名字，可以加webpackChunkName；

同时要在webpack.base.conf.js里面的output里面的filename下面加上chunkFileName

代码

// 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")
    }
  ]
})

注意上面的@代表当前src目录，具体可以去参考webpack的配置

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
}

分析

创建了home和todos两个组件使用了路由懒加载，配置好之后我们执行npm run dev来运行项目，打开network之后刷新一下，我们会发现加载了home.js，我们会发现和上面定义的webpackChunkName名字一样，同时点todos会加载todo.js。这就是路由懒加载的简单使用。

其他

在main.js里面项目的入口我们可以使用template的语法，也可以使用render函数

new Vue({
  el: "#app",
  router,
  components: { App },

  /*
  * 这里使用的template的语法
  * 也可以使用render函数,直接return一个html结构
  */
  // template: ""
  render() {

    return (
      
        
      
    )
  }

  
})

GPU云服务器云服务器懒加载懒加载异常 javascript懒加载懒加载session

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93339.html

vue的路由懒加载和组件的按需加载

摘要：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。路由的懒加载按需加载的写法效果按需加载会在页面第一次请求的时候，把相关路由组件块的添加上非按需加载则会把所有的路由组件块的包打在一起。当业务包很大的时候建议用路由的按需加载懒加载。懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要...

Lucky_Boy 2019-08-21 16:50 评论0 收藏0
代码分割与懒加载情况下（code-splitting+lazyload）抽离懒加载模块的公用模块代码

摘要：但是同时，抽离到父模块，也意味着如果有一个懒加载的路由没有用到模块，但是实际上引入了父模块，也为这也引入了的代码。前言我们清楚，在 webpack 中通过CommonsChunkPlugin 可以将 entry 的入口文件中引用多次的文件抽离打包成一个公用文件，从而减少代码重复冗余 entry: { main: ./src/main.js, ...

zebrayoung 2019-08-22 16:04 评论0 收藏0
VUE-Router按模块配置、懒加载+ Windows中Nginx服务安装、配置解决404

摘要：文章涉及到路由模块化，懒加载，安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种。无法启动服务，报错参考资料发现端口冲突，已经在服务中已经配置端口。服务端口更改为。文章涉及到VUE路由模块化，懒加载，nginx安装，打包配置板块。项目复杂，路由变多，代码维护性降低，从路由模块化开始一步步优化，解决各种BUG。参考了很多方法，会在文章中引用出来...

habren 2019-07-25 14:37 评论0 收藏0
Vue.js路由懒加载[译]

摘要：所以，那些使用较少的路由组件不必打包进里，只需要在路由被访问时按需加载。写起来像这样空数组用来指定该路由组件需要加载的依赖不过，你最好不要使用这种包裹起来的写法，因为会使用静态分析来检测和分割块。作者：Joshua Bemenderfer 原文地址: lazy-loading-routes 译者：jeneser 当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript...

beita 2019-08-21 11:54 评论0 收藏0