项目优化
项目优化策略：
1生成打包报告
2第三方库启用CDN
3Element-ui组件按需加载
4路由懒加载
5首页内容定
1——生成打包报告
打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告，生成报告的方式有两种：
@1通过命令行参数的形式生成报告
//通过vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成report.html 以帮助分析包内容
vue-cli-service build --report
@2 通过可视化的UI面板直接查看报告
在可视化的UI面板，通过控制台和分析面板，可以方便地看到项目中所存在的问题。
2——通过vue.config.js修改webpack的默认配置
通过vue-cli3.0工具生成的项目，默认隐藏了所有webpack的配置项，目的是为了屏蔽项目的配置过程，让程序员把工作重心放到具体功能和业务逻辑的实现上。
如果程序员有修改webpack默认 配置的需求 ，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置 https://cli.vuejs.org/zh/config/#vue-config-js 官方配置
//vue.config.js
//这个文件中，应该导出一个包含了自定义配置选项的对象 module.exports = { //选项 ... }
3——为开发模式与发布模式指定不同的打包入口
默认情况下，vue项目的开发模式与发布模式，共用一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：
@1开发模式的入口文件为 src/main-dev.js
@2发布模式的入口文件为src/main-prod.js
4——configureWebpack和chainWebpack
在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来定义webpack的打包配置。
他们的作用相同，惟一的区别就是它们修改webpack配置的方式不同。
1chainWebpack通过链式编程的形式，来修改默认的webpack配置
2configureWebpack通过操作对象 的形式，来修改默认的webpack配置
两者具体的使用差异：https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
//vue.config.js module.exports = { //选项 chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') }) config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') }) } }
5——解决依赖单文件过大问题：
1@通过externals加载外部CDN资源
默认 情况下，通过import语法导入的第三方依赖包，最终会被 打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。
配置方法： 效果显著
1 vue.config.js 发布模式
config.set('externals', {
vue: 'Vue',
'vue-router': VueRouter,
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
2 public/index.html文件的头部，添加如下CDN资源引用 CSS文件的引用 http://www.staticfile.org/
3 public/index.html文件的头部，添加如下CDN资源引用 JS文件的引用 https://www.jsdelivr.com/
2@通过CDN优化ElementUi的打包
具体操作流程：
1在main-prod.js中，注释掉element-ui按需加载的代码
2在index.html的头部区域中，通过CDN加载element-ui的js和css样式
**************************首页内容定制
不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：
//vue.config.js module.exports = { //选项 chainWebpack: config => { //产品发布阶段 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js') config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) config.plugin('html').tap(args => { args[0].isProd = true return args }) }) //产品开发阶段 config.when(process.env.NODE_ENV === 'development', config => { config .entry('app') .clear() .add('./src/main-dev.js') config.plugin('html').tap(args => { args[0].isProd = false return args }) }) } }
在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构
<title><%= htmlWebpackPlugin.options.isProd ? '' :'dev -' %></title>
<% if(htmlWebpackPlugin.options.isProd) { %> <!-- 通过externals 加载的外部CDN资源 --> <% } %>
******************路由懒加载
当打包构建项目时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分隔成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效嘞。
具体步骤： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
1安装@babel/plugin-syntax-dynamic-import包。
2在babel.config.js配置文件中声明该插件
3将路由改为按需加载的形式，示例代码如下：
webpackChunkName可以实现分组，同组的组件可以被打包到同一个文件中
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
