一。项目优化

优化1，加载进度条显示

安装一个运行依赖，nprogress

然后导包，调用对象展示和隐藏

在main中

基于拦截器实现展示进度条和隐藏进度条的效果

如果触发请求拦截器，证明发起请求，希望展示进度条，如果触发的是响应拦截器，证明希望隐藏进度条。

// 导入进度条报对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

优化2、除去所有的console任务

console语句在编译的时候会是警告，所以需要安装一个插件，去除所有的这个语句

babel-plugin-transfrom-remove-console

移除所有的console代码

这次安装的是开发依赖

使用该插件,//上面的插件如果出现错误，就安装下面一个带s的可以运行出来，

在babel.config,js文件中

 plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
    ,
    'transfrom-remove-console'
  ]

但是需要注意

如果在项目发布阶段使用这条语句是没有问题的，但是如果在项目开发或者测试阶段是有问题的

如果只希望在发布阶段使用，需要

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-consoles')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
    ,
    //发布产品时用到的插件数组
    ...prodPlugins
  ]
}

二，生成打包报告

可更直观的发现项目中存在的问题，

优化3，通过vue.config.js修改webpack的默认配置

现在项目中是找不到webpage的，通过vue-cli 3.0生成的项目，默认隐藏了所有的webpack配置项，目的是让程序员把重心放在具体的业务逻辑上。

通过在项目根目录里创建vue.config.js这个配置文件，对项目的打包发布过程做自定义的配置。

优化4，指定不同的打包入口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  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')
    })
  }
})

把main复制两份，重命名

优化5，减小第一个文件资源的体积

6. 通过 externals 加载外部 CDN 资源

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

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

在vue.config.js中

具体配置代码如下：
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})

同时，需要在 public/index.html 文件的头部，添加如下的 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" />

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：
<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/[email protected]/dist/vue-quill-editor.js"></script>

但可以看到element-ui还是很大

为了减少这个的体积

7. 通过 CDN 优化 ElementUI 的打包

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

具体操作流程如下：

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

② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

现在占用的更小的

但是打开项目空白，搜了之后发现

P202，解决项目运行后一片空白的问题。

原因：老师的 cdn 文件过时了

解决方法：将老师的 vue-router.min.js 后缀的文件替换成最新的

src="" target="_blank">https://cdn.staticfile.org/vue-router/0.4.0/vue-router.min.js">

如果大家有兴趣的可以去浏览一下网址：

https://staticfile.org/

成功解决

优化6，自定义首页标题

当处于开发模式的时候，标题为dev-加标题名称的格式

当处于发布模式的时候，标题前面的dev会去掉

vue.config.js中的代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,

  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>

<!– 按需加载外部的 CDN 资源 -->

<% if(htmlWebpackPlugin.options.isProd) { %>

<!—通过 externals 加载的外部 CDN 资源-->包裹住所有的cdn资源

<% } %>

优化7，路由懒加载

当打包构建项目时， 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')

黑马】后台管理-项目优化和上线