Vue项目优化策略

项目优化策略

1. 生成打包报告

打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：

• 通过命令行参数的形式生成报告

// 通过vue-cli的命令选项可以生成打包报告
// – report 选项可以生成report.html以帮助分析包内容
vue-cli-service build --report

• 通过可视化的UI面板直接查看报告（vue-cli3.0）

在可视化的UI面板中，通过控制台和分析面板，可以方便的看到项目中所存在的问题。

2. 第三方库启用CDN

通过externals加载外部CDN资源：
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是申明在externals中的第三方包，都不会被打包。

1. vue.config.js

   // 发布模式下
   config.set('externals', {
       vue: 'Vue',
       'vue-router': 'VueRouter',
       axios: 'axios',
       lodash: '_',
       echarts: 'echarts'
   })
   

2. 同时，需要在public/index.html文件的头部，添加如下的CDN资源引用，并且删除main.js入口文件中Import引入的css文件：

   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css">
   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css">
   <link rel="stylesheet" href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css">
   

3. 同时，需要在public/index.html文件的头部，添加如下的CDN资源引用js文件， 在main.js入口文件中不用删除：

   <!-- js文件 -->
   <script src="https://cdn.bootcss.com/vue/2.6.11/vue.common.dev.js"></script>
   <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.js"></script>
   <script src="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.min.js"></script>
   

3. Element-UI组件按需加载

虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能的减少了打包体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将element ui中的组件，也通过cdn的形式加载，这样能够进一步减少打包后的文件体积。

具体操作如下流程：

1. 在main.js中，注释掉element-ui按需加载的代码

2. 在Index.html中的头部区域中，通过CDN加载element-ui的Js和css样式

   <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
   <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
   

4. 路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。
具体需要3步：

1. 安装@babel/plugin-syntax-dynamic-import包

2. 在babel.config.js配置文件中申明该插件

3. 将路由改为按需加载的形式，示例代码如下：

   const Foo = () => import (/* webpackChunkName: "group-foo" */ './Foo.vue')
   const Bar= () => import (/* webpackChunkName: "group-foo" */ './Bar.vue')
   const Baz= () => import (/* webpackChunkName: "group-boo" */ './Baz.vue')
   

5. 首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：