最近项目做完，到了令人激 (xiang) 动 (si) 的优化环节，也遇到了不少问题，踩了不少坑，现在呢记录下过程，希望对大家有帮助。
首先呢，先要知道有哪些优化的方法？

一、减少请求次数，看同一个页面有没有重复调用的接口
二、图片压缩，或者做成网图也可以减小包的体积
三、插件按需引入
四、CDN加速
。。。可以优化的方式有很多，这里我主要说下按需引入和CDN，其他的可以自行了解

首先项目做完后

在package-json中，在 build 指令 后面加上这个，指令，
然后build就会在dist中生成report.html，点击打开就能看到项目中的各个包的体积大小。

比如这是我各个做完的项目，可以看到echarts，element非常大，首屏加载时间呢，在7s左右，等待时间可以说是非常长的。

所以，我们先来优化一下这两个东西，echart和element,改为按需引入。具体怎么做呢？

像这样引入，而不是直接一股脑儿的 import echarts from ‘echarts’;

element也是如此，不过element需要配置插件，具体可以看element官网的 快速上手。

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：

然后按需引入element的组件

重新打包看报告

可以看到，刚才的两个大块头已经没了，不过还是有一堆小的。
这时候呢，首屏的加载时间从7.2s已经减少了一些

但是呢，现在的问题是，这个vendor.js太大了，需要很多时间，那我们怎么减小他，来减少加载时间呢

下面呢，我们开始介绍CDN；

首先vue的新脚手架是搭建的项目是没有配置文件的，自己去添加vue-config.js,

module.exports ={
// 就是这个配置
	chainWebpack: config => {
		// 生产环境，这个可以不用管，毕竟我都注释掉了
		// config.when(process.env.NODE_ENV === 'production', config => {
		// 你可以修改这个入口，不改呢默认是main.js，不明白就别跟管这个了，反正我也注释掉了的
		// 	config.entry('app').clear().add('./src/main-prod.js') 
		// })
		然后，在这里设置 需要cdn的依赖和插件
		config.set('externals', {
			vue: 'Vue',
			'vue-router': 'VueRouter',
			axios: "axios",
			echarts: "echarts",
			'vue-quill-editor': "VueQuillEditor",
			'element-ui': 'ElementUI'
		});
	这是一个方法，操作了config，必须要return 出来
		return config
	},
}

这样配置之后呢，然后去public的index.html中引入cdn链接 ，可以使用免费的 BootCDN
在index.html如下操作

对，就是这样操作，然后我们再来康康vendors大小和请求时间


可以看到，现在vue，echart，element等包都从网上引入后，就不会被打包到vendor.js里面了，所以现在vencor的体积只有103kB，从1.2M到103kB，DOM节点加载时间从5.71s到1.16s，什么概念就不多哔哔了好吧。

再啰嗦两句，我打包的dist怎么知道到底有没有实现我要的效果呢？
打个包给后端老大哥？拜托，这种小事就别麻烦后台大佬了嘛。
那怎么搞呢？
自己搭个服务器嘛。

新建一个文件夹，打开终端，npm init -y,然后就生成了一个项目啦，新建一个 index.js,
在里面进行如下操作：

	const express = require('express'); // 引入express插件
	const app = express();	// 使用express插件
	app.use(express.static('./dist'));	// 使用把生成的dist复制到文件夹里作为静态文件交给node管理
	app.listen(8090,()=>{	// 然后再这样
		console.log('server is running at 8090')
	})

再去终端执行 node index 项目运行既可以访问 localhost：8090 来访问你的项目啦，快去试试吧