1.项目优化策略
1.1安装nprogresss依赖添加切换页面加载条效果
1.2.nprogress用法：NProgress.start():展示进度条。NProgress.done():隐藏进度条。
在main.js中导入NProgress
在axios拦截器设置NProgress
这时候切换页面出现一闪而过进度条的效果就完成了。进度条loading效果如下：
1.3处理项目中serve错误和build发布文档
build再输出中查看错误
处理方式：由于发布不允许出现console，serve可以使用console。使用babel插件在build阶段移出console。
浏览器搜索：babel-plugin-transfrom-remove-console
打开搜索点击npm查看使用；
安装和声明
使用和官方不一样，官网是在.babelrc
这样就没有console错误了。
这三个提示主要是有些文件体积太大了。
注意：由于babel.config.js配置是全局的，我们只需要在项目测试和开发阶段不移出，而在发布阶段移除这个console。需要增加一个判断条件。
查看后方式如下：在vue项目ui界面查看开发阶段和发布阶段的编译模式
解释：...prodplugins 展开运算符：在一个数组中放另外一个数组。
重新运行server后可以看到console打印内容
2.接下来是生成打包报告：
1.通过命令行参数的形式生成报告
通过vue-cli的命令选项可以生成打包报告。--report选项可以生成report.html以帮助分析包内容
vue-cli-service build --report
2.通过可视化UI面板直接查看报告(推荐)
在可视化UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的
build运行之后通过控制台和分析进行查看。项目所存在的问题
优化插件的大小和项目运行速度。可以看到在不同网络状态下运行的速度。
可以看到感叹号资源文件过大，运行慢。我们需要优化依赖性和资源。
通过vue.config.js修改webpack 的默认配置
通过vue-cli3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏幕项目的配置过程，让程序员把工作的重心放到具体功能和业务逻辑的实现上。
修改webpack默认配置，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置(具体配置参考https://cli.vuejs.org/zh/config/#vue-config-js).
输出对象按照官方文档进行配置 , 里面配置文档参考官方文档
3.为开发模式与发布模式指定不同的打包入口
3.1 默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(即src/mainjs)。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即:
- 开发模式的入口文件为src/main-dev.js
- 模式的入口文件为src/main-prod.js
3.2如何修改打包入口呢？configureWebpack和chainWebpack
- 在vue.config,js 导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义webpack的打包配置。
- 在这里,configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改webpack配置的方式不同:
- chainWebpack通过链式编程的形式，来修改默认的webpack配置
- configureWebpack通过操作对象的形式，来修改默认的webpack配置
- 两者具体的使用差异，可参考如下网址:
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
3.2.1通过chainWebpack自定义打包入口
解释：clear为默认打包入口，add为新增打包入口
把main.js文件重名为main-dev.js。src中新建一个main-prod.js文件，内容为main.js文件中的内容。
在vue.config.js中配置如下：
之后测试serve和build是否可以正常运行打包。
4.import优化依赖项资源
4.1通过externals 加载外部CDN资源
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals 中的第三方依赖包，都不会被打包。
在打包的时候依赖项会生成到一个js文件中。可以把依赖项声明到extemals中。打包期间。webpack会先检查程序员有没有在extemals有没有声明一些第三方插件包。如果有的话webpack就不会把对应打包到这个js文件里去。而是在用到这个依赖包的时候在windos对象上去找现成的对象使用。排除一些包不被打包。
具体配置如下：
在打包的时候查找到import导入的包名为vue不会合并到打包的js中。而是会在windows全局对象查找vue并且直接进行使用。
在发布模式配置如下：
同时需要在public/index.html文件的头部，添加如下的cdn资源引用
在main-prod.js中导入的这些样式代码。最终都会被合并到文件。导致体积很大。可以把样式表删除掉。把样式引用到public目录下的index.html中
在head中添加一下js引用
保证windows全局对象中包含这些导入的包，需要把对应的js文件在头部中引用。上面是需要用到的样式表，下面是需要用到的js文件。
接下来再build就会发现依赖项体积变下：
4.2 通过CDN优化ElementUI的打包
虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element-ui中的组件
也通过CDN的形式来加载，这样能够进一步减小打包后的文件体积。
具体操作流程如下:
- 在main-prod.js中，注释掉element-ui按需加载的代码
- 在index.html的头部区域中，通过CDN加载element-ui的js和css样式
主要代码如下：
记得注释掉按需导入的代码：
5.首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：
在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构:
cdn标签。如果是发布模式就渲染这些标签。处于开发阶段不会渲染这些标签
server之后打开查看项目名称是否改变：
没有外部cdn连接：
打开目录可以看到dist文件，这个就是发布好的产品。
6.路由懒加载
当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
具体需要3步:
安装@babel/plugin-syntax-dynamic-import包。
②在babel.config.js配置文件中声明该插件。
③将路由改为按需加载的形式，示例代码如下:
const Foo = () => import (/* webpackChunkName: "group-foo" */ './Foo. vue ' )
const Bar = () => import ( /* webpackChunkName: "group-foo" */ './Bar. vue ' )
const Baz= () => import(/* webpackChunkName: "group-boo" * / './Baz.vue ' )
6.1 提前安装babel这个插件。
类似与注释的文件是路由的分组。红色的路由文件。如Foo和bar的组名一样。请求foo顺带也会请求bar。
关于路由懒加载的详细文档，可参考如下链接:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
在项目babel.config.js中配置如下：
接下来把路由的组件都改成懒加载的形式。
router.js中不使用传统的这种方式了：
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步块(chunk)中。只需要使用命名chunk，一个特殊的注释语法来提供chunk name(需要Webpack > 2.4)。
const Foo =() -> import(/*webpackChunkName:"group-foo”*/ './Foo. vue')
onst Bar = () -> import(/* webpackChunkName: "group-foo”*/ './Bar.vue')
const Baz=() =import(/*webpackChunkName:"group-foo”*/ './Baz. vue')
例如想把login,home和welcome一起加载
把原来的import可以注释掉了
改造完成效果如下：
都分组完之后重新build,打包之后的体积文件更加小。
到这里就完成项目优化的过程啦，虽然有点多，但是项目优化和上线是必须要掌握的基本内容。
