vue 按需加载

155 阅读1分钟

1 const routes = [ { path: '/',

                          name: 'app',

                          meta: { title: '页面1' }, 

                          component: ()=>import('../a.vue') },

                         { path: '/subtable', name: 'app', 

                          meta: { title: '页面2' }, component: ()=>import(../b.vue) } ]

2  vue 打包完的html文件内容如下,部分是prefetch,部分是preload

<link href=/js/chunk-6063dbe9.bce199c3.js rel=prefetch>     
<link href=/js/chunk-8e2693ec.7eaa3254.js rel=prefetch>      
<link href=/js/chunk-9302b50a.91c77030.js rel=prefetch>       
<link href=/js/chunk-cd7b37f0.968f1c77.js rel=prefetch>     
<link href=/js/chunk-e0f3ac5e.3d69780b.js rel=prefetch> 
<link href=/js/chunk-f1ef4f9e.c12a3d03.js rel=prefetch>        
<link href=/css/app.bed9fce3.css rel=preload as=style>        
<link href=/css/chunk-vendors.cd6faa65.css rel=preload as=style>        
<link href=/js/app.611b3369.js rel=preload as=script>        
<link href=/js/chunk-vendors.ef6d0bec.js rel=preload as=script>
3  preload 加载资源一般是**当前页面需要的**,prefetch 一般是**其它页面有可能用到的资源**