one. Project optimization

Optimization 1, loading progress bar display

Install a running dependency, nprogress

Then import the package, call the object display and hide

in main

Realize the effect of displaying progress bar and hiding progress bar based on interceptor

If the request interceptor is triggered, it proves that the request is initiated and the progress bar is expected to be displayed. If the response interceptor is triggered, it is proved that the progress bar is desired to be hidden.

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

Optimization 2. Remove all console tasks

The console statement will be a warning when compiling, so you need to install a plug-in to remove all this statement

babel-plugin-transfrom-remove-console

Remove all console code

This time, the development dependencies are installed

Use this plug-in, //If there is an error in the above plug-in, install the following one with s to run it,

In babel.config,js file

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

but need attention

There is no problem if this statement is used in the project release phase, but if there is a problem in the project development or testing phase

If you only want to use it in the release phase, you need

// 这是项目发布阶段需要用到的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
  ]
}

Second, generate a packaging report

The problems existing in the project can be found more intuitively,

Optimization 3, modify the default configuration of webpack through vue.config.js

The webpage cannot be found in the project now. The project generated by vue-cli 3.0 hides all the webpack configuration items by default. The purpose is to let the programmer focus on the specific business logic.

By creating the vue.config.js configuration file in the project root directory, you can customize the project's packaging and publishing process.

Optimization 4, specifying different packaging entries

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')
    })
  }
})

Make two copies of main and rename it

Optimization 5, reduce the size of the first file resource

6. Load external CDN resources through externals

By default, third-party dependent packages imported through the import syntax will eventually be packaged and merged into the same file, resulting in the problem that the size of a single file is too large after the package is successful.

To solve the above problems, you can configure and load external CDN resources through the externals node of webpack. All third-party dependent packages declared in externals will not be packaged.

in 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>

But you can see that element-ui is still very big

To reduce the volume of this

7. Optimize the packaging of ElementUI through CDN

虽然在开发阶段，我们启用了 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')

Dark Horse] Background Management - Project Optimization and Launch