1.生成打包报告
打包时，为了直观地发现项目中存在地问题，可以打包时生成报告。生成报告的方式有两种：
①通过命令行参数的形式生成报告
// 通过vue-cli的命令项可以生成打包报告
// --report选项可以生成report.html以帮助分析包内容
vue-cli-service build --report
②通过可视化的UI面板直接查看报告（推荐做法）
在可视化的UI面板中，通过控制台和分析面板，可以方便看到项目中所存在的问题。
1.1项目的优化策略
1.通过vue.config.js修改webpack的默认配置
通过vue-cil3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作重心，放到具体功能和业务逻辑的实现上。\
如果想要修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置。（具体配置参考cli.vuejs.org/zh/config/#…
// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象(向外部暴露一个对象)
module.exports = { // 选项... }
2.为开发模式与发布模式指定不同的打包入口
默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离。我们可以为两种模式，各自指定打包的入口文件，即：
①开发模式的入口文件为：src/main-dev.js
②发布模式的入口文件为：src/main-prod.js
3.configureWebpack和chainWebpack
在vue.config.js导出的配置对象中，新增configureWebpack或chinWebpack节点，来自定义webpack的打包配置。
configureWebpack和chainWebpack的作用相同，唯一的区别就是它们修改Webpack配置的方式不同：
①chainWebpack通过链式编程的形式，来修改默认的webpack配置
②configureWebpack通过操作对象的形式，来修改默认的webpack配置
4.通过chainWebpack自定义打包入口
①将main.js重命名，并生成两个js文件，一个用于产品发布阶段的js，一个用于产品开发阶段的js
2.第三方库启动CDN
通过externals加载外部的CDN资源
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals的第三收费依赖包，都不会被打包合并到上面图片中的那个文件中去。
具体配置代码如下：在发布模式中添加。
同时，需要在public/index.html文件的头部，添加如下的CDN资源引用：
先将框中的css样式引用删除掉
然后，在public的index.html的头部引入相应的样式文件
最后将js文件也引入进来即可。
最终打包效果，有所减小。
3.Element-UI组件按需加载
通过CDN优化Element-UI的打包
没有采用按需加载element-ui组件，占用了较大的文件体积。此时，可以将element-ui中的组件，也通过CDN的形式加载，这样能够进一步减小打包后的文件体积。
具体操作流程如下：
①在main-prod.js中，注释掉element-ui按需加载的代码（我写的没有按需导入）
②在index.html的头部区域中，通过CDN加载element-ui的js和css样式
4.首页内容定制
不同的打包环境下，首页内容肯有所不同，我们可以通过插件的方式进行定制，插件配置如下：
在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构：
5.路由懒加载
当打包构建项目时候，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。\
具体需要三步：
①安装@babel/plugin-syntax-dynamic-import包。
②在babel.config.js配置文件中声明该插件。
③将路由改为按需加载的形式，示例代码如下:
关于路由懒加载的详细文档，可参考如下链接：
router.vuejs.org/zh/guide/ad…
将所有路由都改成懒加载的模式
