前端项目发布之前的压缩打包优化处理流程

常见的优化策略有:

1.生成打包报告

      推荐使用 可视化的vue ui面板，直接分析查看控制台和分析，查看存在的问题

      新建vue.config.js 配置文件，修改webpack默认配置，进行自定义，这个文件需要module.exports = {  }

     因为有开发模式和发布两种模式，可以为这2种模式指定不同的打包入口，vue默认这2种模式共用同一个main.js 入口，

    开发模式的入口可以设置为src/main-dev.js

    发布模式的入口可以设置为src/main-prod.js

 chainWebpack 通过链式编程的形式      configureWebpack 通过操作对象的形式

2.使用第三方库启用CDN

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包。

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用(css和js文件通过CDN引入

<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

3.Element-ui组件按需加载

element ui文件也有点大，通过import 按需导入的时候，也可以使用cdn 加载

① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-
chalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

4.路由懒加载

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

① 安装 @babel/plugin-syntax-dynamic-import 包。
② 在 babel.config.js 配置文件中声明该插件。

（补充如下图片内容知识点：transform-remove-console 是一个插件需要安装，实现的效果是：如果是发布模式，那么控制台不会打印项目里面的console.log()内容，会进行省略，在babel.config.js文件中配置）

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

注意：这里不是注释  /*  */  固定写法 将 Login和Home 2个组件放一起打包，组成一个代码块，其他的路由也进行合理的分割 ，在路由表里面设置 router.里面的index.js

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

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

5.首页内容定制

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

实现的效果就是，如果是开发模式下，打包出来的文件，html文件title带如下

例如：发布模式下  title为 “..管理系统”

          开发模式下 title为 “dev-管理系统”

只有在发布模式下，才使用CDN加载，所以也设置一个isProd判断，固定的写法