Vue Webpack 打包优化——路由懒加载（按需加载）原理讲解及使用方法说明前言为什么需要vue懒加载（按需加载）

前言

为什么需要vue懒加载（按需加载）？

学习Vue的时候，各类教程都会告诉我们：Vue的特点是SPA - Single Page Application（单页面应用程序）。

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后，一般情况下，会放在一个单独的js文件中。但是，如果很多的页面都放在同一个js文件中，必然会造成这个页面非常大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

路由懒加载有着诸如：“只有第一次会加载页面，以后的每次页面切换，只需要进行组件替换。减少了请求体积，加快页面的响应速度，降低了对服务器的压力”等等优点。

为了解决上面的问题，我们需要对Vue实现组件懒加载（按需加载）。

阅前须知：

下面，我将简单讲解一下 Javascript 的懒加载（按需加载）原理以及在Vue上的应用。 原理部分为我个人参考多篇文章总结而来，有可能存在错误。希望发家阅读时，抱着质疑的态度去阅读。同时也欢迎大家评论指正！！！

本文所讲的JS、Webpack 以及 Vue-Cli版本分别为：

Javascript：ES2015（ES6）及以上
Webpack：Webpack v4 及以上
Vue-Cli： Vue-Cli v4

正文

什么是懒加载（按需加载）？

路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
官方解释：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

上面这段话，用一句俗语讲就是“占着茅坑不拉屎”。先占着茅坑，屎意来的时候再来。
也就是，组件现在路由里注册但不进行组件的加载与执行，等到需要访问组件的时候才进行真正的加载。

懒加载（按需加载）的前提

懒加载前提：
进行懒加载的子模块（子组件）需要是一个单独的文件

为什么呢？因为懒加载是对子模块（子组件）进行延后加载。如果子模块（子组件）不单独打包，而是和别的模块掺和在一起，那其他模块加载时就会将整个文件加载出来了，这样子模块（子组件）就被提前加载出来了。所以， 要实现懒加载，就得先将进行懒加载的子模块（子组件）分离出来。

懒加载实现的前提：ES6的动态加载模块 - import（）

调用import（）之处，被作为分离的模块起点，意思是，被请求的模块和它引用的所有子模块，会分离到一个单独的 chunk 中。
---- 来自《webpack - 模块方法》的import（）小节

《webpack - 模块方法》 import（）小节

简单来讲就是，通过import()引用的子模块会被单独分离出来，打包成一个单独的文件。

这里有个知识点：
项目通过 webpack 打包时会进行资源整合，也就是会把项目中的 JS、CSS等文件只能找一定的规则进行合并，已达到减少资源请求
的目的。

代码示例

构建一个简单的webpack项目：

webpack.congfig.js文件配置如下

/*webpack.config.js*/
const path = require('path')
module.exports = {
    entry:'./src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].bundle.js',
        filename: 'bundle.js',
    }
}

创建入口文件main.js

/* main.js */ 
// 这里引入con.js，注意没有使用

import() require('./con.js')

创建被引入文件con.js

/* con.js */
function cons(){
  console.log("123")
}

module.exports = {cons}

具体目录结构如下：

接着运行 npm run build 进行打包，结果如下:

可以看到使用require（）引入con.js，打包后的结果是con.js合并到bundle.js。打开bundle.js，可以看到con.js代码被嵌入bundle.js。

可以看到，使用import（）引入con.js，con.js打包成独立的js文件。

注意：
上面的例子，使用的都是同一套webpackconfig.js配置文件。所以，实现上面的功能仅仅是因为import（）的使用。

小知识点：import()中的注释。 我们注意到，import（）括号里面有一串注释，如：

import(/* webpackChunkName: "con" */ './con.js')

他并不是可有可无的东西。通过这个注释，再配合webpacj.config.js的output.chunkFilename，我们可以设置打包生成的文件（chunk）的名字。例如，上面例子的Webpack的配置：

module.exports = {
    entry:'./src/main.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: '[name].bundle.js',
        filename: 'bundle.js',
    }
}

这里设定了chunkFilename的命名规则为：[name]+.+bundle.js。这里的[name]就是/* webpackChunkName: "con" */ 设定的值，除了webpackChunkName，还有其他属性设定，详情请看:

webpack——Magic Comments 。

借助import（），我们实现了子模块（子组件）的独立打包（children chunk）。现在，距离实现懒加载（按需加载）还差关键的一步 -- 如何正确使用独立打包的子模块文件（children chunk）实现懒加载。这也是懒加载的原理。

借助函数实现懒加载（按需加载）

首先，我们先来回顾一下JavaScript函数的特性：

无论使用函数声明还是函数表达式创建函数，函数被创建后并不会立即执行函数内部的代码，只有等到函数被调用之后，才执行内部的代码。 相信对于这个函数特性，大家都十分清楚地。看到这里，大家对于懒加载的实现可能已经有了思路。

只要将需要进行懒加载的子模块文件（children chunk）的引入语句（本文特指import（））放到一个函数内部。然后再需要加载的时候执行该函数。这样就可以实现懒加载（按需加载）。这也就是是懒加载（按需加载）的原理了

将上面的例子补充完整：

新增index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载演示</title>
</head>
<body>
    <button class="button1" style="cursor: pointer;">懒加载 con.js</button>
    <script src="bundle.js"></script>
</body>
</html>

main.js改动如下：

window.onload = () => {
    const btn = document.querySelector('.button1')
    
    // 给按钮添加click事件，按钮被点击后，加载 con.js
    btn.onclick = () => import(/* webpackChunkName: "con" */ './con.js')
}

目录结构如下：

打包后，运行项目：

可以看到，con.js实现了懒加载（按需加载） 。

懒加载（按需加载）实现原理的概括

回顾前两节的内容，懒加载（按需加载）原理分为两步：

将需要进行懒加载的子模块打包成独立的文件（children chunk）；
借助函数来实现延迟执行子模块的加载代码；是不是很简单呀！这里的技术难点就是如何将懒加载的子模块打包成独立的文件。好在ES6提供了import()。然后这一切就变得十分简单了。

在Vue-router 实现路由懒加载（按需加载）

讲了这么多，最后再来讲讲懒加载在vue-router的使用吧。有了前面的基础，在vue上使用懒加载就变得简单了。

以往我们配置Vue-router是这样的：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 这里引入子模块
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history'，
  routes
})

export default router

上面的例子先加载子组件，然后将子组件命名为Home，最后再将Home赋给Vue的component。这样就导致子组件的提前加载。接下来，实现子组件懒加载，则改动如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'Home',
    // 将子组件加载语句封装到一个function中，将function赋给component
    component: () => import( /* webpackChunkName: "home" */ '../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history'，
  routes
})

export default router

将子组件加载语句封装到一个function中，将function赋给component。这样就可以实现Vue-router懒加载（按需加载）。

是不是非常简单！哈哈！

可能这里有人会疑惑，component可以接收一个function吗？这确实可以的。不要被以往的观念束缚。component是对象的一个属性，在Javascript中属性的值是什么类型都可以。

简述另外两种实现Vue-router路由懒加载的方式

1. vue异步加载技术：

 1：vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，此时一个组件会生成一个js文件。
 2：component: resolve => require(['放入需要加载的路由地址'], resolve)

  {
      path: '/problem',
      name: 'problem',
      component: resolve => require(['../pages/home/problemList'], resolve)
    }

2.webpack提供的require.ensure()实现懒加载：

 1：vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
 2：这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
 3：require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
 4：第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
 5：第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
 6：第三个参数是错误回调。
 7：第四个参数是单独打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

import和require的比较（了解）

1：import 是解构过程并且是编译时执行
2：require 是赋值过程并且是运行时才执行，也就是异步加载
3：require的性能相对于import稍低，因为require是在运行时才引入模块并且还赋值给某个变量

结语

至此，关于懒加载（按需加载）的说明就结束了。刚开始时对这部分还是挺畏惧的。心想着懒加载，这么高大上的东西一定非常难。后来查阅许多资料，仔细研究后，逐渐了解了懒加载，并借着写这篇文章的机会，边写边学，进一步巩固知识点，算是对懒加载有了较深的理解吧。其实，仔细看来懒加载的原理并不是很复杂。希望本文对大家有所启发与帮助。

其中可能存在错误，希望各位大佬踊跃指出。