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">了

          

      

      

  • 相关阅读:
    frog-jump
    nth-digit
    binary-watch
    elimination-game
    evaluate-division
    random-pick-index
    integer-replacement
    rotate-function
    longest-substring-with-at-least-k-repeating-characters
    decode-string
  • 原文地址:https://www.cnblogs.com/codexlx/p/12496270.html
Copyright © 2011-2022 走看看