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

    webpack会把所有的js文件都打包成一个js文件,影响页面加载速度。

         (1)router/index.js中配置懒加载的路由地址: 

        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

      (2)脚手架默认采用babel翻译js代码,需要安装babel的一个插件:

        npm i -save @babel/plugin-syntax-dynamic-import  

        此时npm run build 编译完成的结果中可以看到以要懒加载的组件命名的独立js文件

        此时独立的.js文件还是会在后台自动加载,即使不会访问的页面也会下载下来。

      (3)配置webpack配置文件(vue/cli 3.0版本的新的webpack配置文件)

        在整个项目的根目录下新建vue.config.js文件,内容如下:

    module.exports={
       chainWebpack:config=>{
        config.plugins.delete("prefetch")
      }
    }
    //prefetch意思是,一旦网络空闲,就自动下载独立.js文件

     此时页面的head中就看不到<link href="/js/about.js" rel="prefetch">了

          

      

      

  • 相关阅读:
    正则判断密码强弱
    QQ号码正则判断
    简单正则验证
    计算星期几
    实现这一天是这一年中的第几天
    倒计时
    选项卡放大镜(淘宝购物效果)
    遮罩层放大镜
    普通放大镜
    分布式事务解决方案(一) 2阶段提交 & 3阶段提交 & TCC
  • 原文地址:https://www.cnblogs.com/codexlx/p/12496270.html
Copyright © 2011-2022 走看看