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资源