之前使用AngularJs做项目的时候，发现一个问题，用户打开首页，所有的controller都会加载进来，这样是不科学的，因为首页只需要首页的controller，其他页面可以做按需加载，也就是懒加载，用到的时候再去请求，所以最后通过RequireJs实现了AngularJs的controller的懒加载。

同样在VueJs中也存在一个问题，因为VueJs的核心是组件，通过Webpack打包工具最后会生成一个特别大的bundle.js文件，在用户网络不太好的情况下，想要在2s内加载完这个特大js文件几乎是不可能的，所以同样需要做按需懒加载，幸好，Webpack提供了code-spliting功能可以帮助我们做到这一点。

方法一:使用vue-cli脚手架构建一个vue项目，然后使用vue官网提供的方法，通过异步来引入组件，即可实现按需加载

建议参考:

《使用vue-cli脚手架构建项目目录》

《Vue路由懒加载方法》

根据以上两步，即可实现路由懒加载，项目运行之后，在chrome浏览器中打开network网络面板，点击任意路由进行跳转，看看是不是实现了按需加载。

方法二:在不用vue-cli脚手架的情况下实现组件的懒加载

1、首先通过npm安装html模板插件，具体方法查看:《Webpack全套入门教程之html模板插件》。

2、配置webpack的entry和output选项，例如:

module.exports = {
entry: __dirname + ‘/src/public/js/main.js’,//已多次提及的唯一入口文件
output: {
path: __dirname + ‘/src/build/’,//打包后的文件存放的地方
filename: “[chunkhash].build.js”,//打包后输出文件的文件名
publicPath: ‘./build/’
},
};
publishPath主要指定资源文件的引进目录。例如在express中，指定了public/build是网站的根目录，网站的源文件存放在public中，那么就需要设置path:”./build”指定打包输出到该目录，而publicPath就需要设置为”/”,表示当前路径。

3、配置node静态资源目录和模板目录，例如:

var http = require(‘http’);
var express = require(‘express’);//引入express模块
var app = express();//初始化express
var bodyParse = require(‘body-parser’);//接收post数据
//设置前端模板录
app.set(‘views’, __dirname + ‘/src/’);
//设置前端模板文件类型
app.set(‘view engine’, ‘ejs’);
//设置静态资源目录
app.use(express.static(__dirname + ‘/src/’));
完成以上三步，再次按照vue官方给出的组件异步懒加载方法，在路由中配置异步组件进行加载即可。