最近 的节点，降低大量延迟，让访问速度可以得到很大提升
一个原则是尽量将比较大的第三方库放到cdn上去以减少请求时间，在我的项目中，我将vue,vuex,vue-router,echarts都放到了cdn上，具体操作是打开BootCDN 然后搜索关键字并copy链接粘贴到index.html的body闭合标签前，如下图
注意选取min.js(体积最小),然后在webpack.base.conf.js里设置externals选项，目的是不打包这些选项,由于index.html中script的引入，比如vue就会有一个全局变量Vue存在，因此这里external的value就是Vue
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'echarts': 'echarts'
},cdn使用后优势是巨大的，观察network面板，时间几乎都在50ms以下
路由懒加载
路由懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
Vue官网的示例如下，采用异步组件和webpack的code-splitting结合
因此在项目中，进入router的index.js中，将原来的
import Comp from '@/component/xxx' 改为如下,vue-router的配置项还是保持不变
//异步组件，路由懒加载
const BookMark = resolve => require(['@/components/BookMark'],resolve);
const HotBookMark = resolve => require(['@/components/HotBookMark'],resolve);
const ImportBookMark = resolve => require(['@/components/ImportBookMark'],resolve);
const Default = resolve => require(['@/components/Default'],resolve);打包后查看js文件夹下的文件，会多出上述文件，每个进行懒加载的组件都会生成一个js，如下图红框内
第三方按需加载
比如本项目里面使用的echarts，只用到了一个柱状图组件，其余的都没有用到，但是这样import后打包时却会把整个echarts都打入包内，造成空间浪费
import echarts from 'echarts'因此只需要import用到的组件即可，如下，这样就可以减少很多不必要的体积
