一、打包文件解析

1.前言

试想一下，如果我们把鸡蛋放在同一个篮子，万一不小心把篮子摔了，所有鸡蛋就都碎了o(╥﹏╥)o 所以我们一般都把鸡蛋分开篮子放。

同样，当我们把所有的文件都打包到 bound.js 文件夹下，该文件夹就会变得很大，加载缓慢。如果我们把不同路由对应的组件分割成不同的代码块，分别打包，当路由被访问时才加载相应的组件，就变得高效起来。所以我们要将不同的文件打包在不同的地方。

既然如此，这么多的 css 文件、 js文件、html文件，我们怎么知道它们分别在那个包呢？很简单，下面小编就为你们一一道来 (✿◡‿◡)

2.文件解析

首先，执行 npm run build 执行，对项目进行打包，打包后产生的 dist 文件夹有以下的内容：

image.png

① CSS 文件

当我们打开 CSS 文件夹的时候，看到里面仅仅包含了 .css 的文件，由此可见，打包的 css 文件都放在这里了，你记住了嘛ヾ(◍°∇°◍)ﾉﾞ
（小编也不太清楚为什么会多了个.map的文件，如果有大神知道还请指点迷津 Ծ‸Ծ）

image.png

② js 文件

当我们打开 js 文件夹的时候，看到里面主要包含了三类的文件：app.XXXX、manifest.XXXX、vendor.XXXX

image.png

2.1 app.XXXX
app 是application的缩写，主要是 包含当前应用开发的所有代码，简单说就是自家写的代码。肥水不流外人田嘛O(∩_∩)O

2.2 vendor.XXXX
vendor 译为提供商，也就是你在项目中引用第三方的东西。比如 vue、vue-router 等等。

2.3 manifest.XXXX
为打包的代码做底层支撑。其实跟webpack的原理挺像的，因为没有webpack，一些 ES6、CommonJS 模块是没有办法被浏览器识别的，有了webpack做为底层支撑，一些不能被浏览器识别的模块就能识别了。
总结起来就是：app是自家的代码，vendor是别家的代码，mainfest是底层支撑。

image.png

二、路由懒加载

1.原因回顾

上面已经提及到，当我们把所有的文件都打包到 bound.js 文件夹下，该文件夹就会变得很大，加载缓慢。如果我们把不同路由对应的组件分割成不同的代码块，分别打包，当路由被访问时才加载相应的组件，就变得高效起来。
比如：

image.png

在这个页面中，有三个按钮：首页、购物车、我的。那么这三个按钮肯定有对应的页面，这三个页面又可以看成是是个不同的组件。
如果没有路由懒加载时，当用户进入到该页面，就 会向静态资源服务器一下子请求了“首页”、“购物车”、“我的”三个页面的所有资源。三个还好说，但是当数据量庞大的时候，加载就会变得缓慢，甚至用户的界面会出现空白的情况。
有了路由懒加载之后， 当用户进入了“首页”，仅仅请求有关“首页”的资源。其余没有用到的资源都不请求。这样不管有多少的数据，我没用到的都不管我的事，所以就变得十分高效 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

2.路由懒加载做了什么？

① 将路由对应的组件打包成一个个的 js 代码块
② 只有在这个路由被访问的时候才加载对应的组件。
不明白？没关系，下面小编一步一步演示一遍。

3.懒加载的方式

① 结合 vue 的异步组件和Webpack 的代码分析

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

啊？不会(⊙_⊙)?没关系没关系，下面还有简单的
② AMD写法

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

啊？还不会 (⊙_⊙)?？没关系~小编还会最后的杀手锏
③ 箭头函数

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

下面小编用方法③结合我们的程序跑一下呗

//在index.js 文件修改
//1.导入
import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import ('../components/home.vue')
const About = () => import ('../components/about.vue')
const User = () => import ('../components/user.vue')
Vue.use(VueRouter)

//2.创建路由对象
const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/user/:userID',
            component:User
        }
        
    ],
    mode:'history',
    linkActiveClass:"warp"
})

//3.导出路由
export  default router

image.png

可以看到在打包好的js文件夹下多的三类的 .js文件。为什么是三个呢？因为有三个页面用了懒加载吖o( ￣︶￣)o

今天讲了路由的懒加载，但是小编一点也不懒哦，今天是来的第59天啦！每天坚持日更ヾ(◍°∇°◍)ﾉﾞ
如果你被小编坚持日更的精神感动到了，就给小编点点赞o(￣▽￣)ｄ
❤您的赞就是对小编最大的鼓励❤

image.png

Vue.js进阶系列(33)--路由懒加载

一、打包文件解析

1.前言

2.文件解析

① CSS 文件

② js 文件

二、路由懒加载

1.原因回顾

2.路由懒加载做了什么？

3.懒加载的方式

你可能感兴趣的:(Vue.js进阶系列(33)--路由懒加载)