vue-router--路由的懒加载

659 阅读2分钟

js的分包

一开始,我们在使用Webpack进行打包的时候,我们是将所有的文件打包到一个bundle.js中。包括.css文件,.js文件,.vue文件等等。(当然图片文件肯定是分开的) 这样我们的bundle.js就会异常庞大。后来,Webpack对bundle.js进行了划分:之前仅仅有一个bundle.js,后来给它划分为了:

  • 第一步,将css剥离,放在一个css文件夹中
  • 第二步,对js进行分包
    1. app.js 你写的业务代码
    2. manifest.js 底层支撑的js。这个比较难理解。比如说,之前我们实现了模块化,但是我们最终的打包代码并没有模块化规范的代码,其实是webpack换了种浏览器能看得懂的方式来实现它。那这些代码放在哪呢,就应该是放在manifest.js中。
    3. vendor.js 第三方的代码。比如说vue源码,vue-router源码

加载页面的方式

当你通过浏览器加载页面的时候,他会去静态资源服务器请求所有的代码,包括app.js,manifest.js,vendor.js等等,那么请求的js可能就特别大,影响页面的加载,甚至导致页面的白屏。所以我们需要进一步对js代码进行划分。

进一步划分js

进一步划分哪个js呢?主要是我们的业务代码app.js。**划分的依据是什么呢?它会根据你路由来划分js。**这个应该很好理解,比如说,在我们的vue-router中,我一个url对应一个组件,那也就是说当我位于一个特定url的时候我只会显示一个组件,其他组件不会被加载,也就是说其他组件打包的js代码暂时是没用的,那我们没必要请求过来,所以我们根据路由进一步划分app.js。但是实际上本省我们不会这样打包代码。这要用到路由的懒加载。

路由的懒加载

所谓懒加载,就是用到哪个,加载哪个。通过路由的懒加载,能进一步以url的标准划分app.js。这样就能减少请求的js文件的大小,比如说这里我使用懒加载再次打包。 由于刚刚有三个path,所以我使用懒加载划分出了6个js文件,三个是从app.js中细分出来的,分别对应这三个path对应的组件打包出来的js文件。

路由懒加载的方式

当我在配置路由的时候通过这种方式导入组件,那他对应的组件打包出来的js代码就会被分离出来。

const  cpn  = ()=>import("...");

比如说举个例子,现在我们请求的url为localhost:8080/home,它会请求的js文件是app.js,vendor.js,manifest.js还有home.vue打包的js.像about.vue和listing-detail.vue打包的js是不会被请求的。