webpack项目优化策略步骤
1 第三方库启动CDN => 通过externals加载外部cdn资源
2 组件按需加载
3 路由懒加载
在打包构建项目时，js包会变得非常大，影响页面加载，将不同的路由对应的组件分隔成不同的代码块，然后路由访问时才加载对应的组件，更加高效
解决方案：
3.1 安装@babel/plugin-syntax-dynamic-import包
3.2 在babel.config.js文件中配置文件声明该插件
3.3 将路由改为按需加载的形式
4 首屏内容定制

路由懒加载的原理
1 我们在一开始用es6的写法，在路由文件router/index.js中引入所有路由要用到的组件，
2 然后在每个路由对象中注册组件。使用这种方法时，我们加载路由文件时，首先要加载所有引入的路由组件，这样会影响页面的加载速度。
3 箭头指向的部分就是好我们改善方法，当用require这种方式引入的时候，会将component分别打包成不同的js文件，加载的时候也就按需加载，只用访问这个路由地址时才会加载这个js
两种写法
原：import login from ‘@/views/login/index.vue’
写法1：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
写法2：
component:resolve => require(['@/pages/task'],resolve)
对比原来的引入方式，就能发现不同点：现在的 Login 是个函数，当路由规则匹配上，就会执行这个函数，才去加载此组件

CDN引入资源原理
1 先使用externals在vue.config.js中，设置打包排除项。
2 接着设置好排除项后，为了使我们可以使用vue，axios、echart，我们需要加载外部CDN形式解决引入依赖项，在public/index.html文件的头部，添加以上排除的CDN资源