zoukankan      html  css  js  c++  java
  • vue路由懒加载

    像vue这种单页应用,不做懒加载就会把所有资源打包成一个文件,当项目越做越大时打包出来的文件也越大。造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候, 才加载对应的组件。

    一、懒加载的方式

    1、结合Vue的异步组件和Webpack的代码分析

    const Home = resolve => { require.ensure(['../components/Home.vue'], () => 
    { resolve(require('../components/Home.vue')) })};

    2、AMD写法

    const About = resolve => require(['../components/About.vue'], resolve);

    3、在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割

    const Home = () => import('../components/Home.vue')

     

     也可以这样写

    打包后如下所示,在下面三个的基础上多了三个js文件,分别对应三个路由

     

    不积跬步无以至千里
  • 相关阅读:
    JVM(三)初始化
    JVM(四)类加载机制
    JVM(一)内存分配
    java的日期时间处理(待更新)
    Java----finally
    FFmpeg(一)
    SqlServer
    MySql 8.0.12安装、配置
    Android的各大框架整理
    互联网协议入门
  • 原文地址:https://www.cnblogs.com/lyt0207/p/11971952.html
Copyright © 2011-2022 走看看