uno. Optimización de proyectos

Optimización 1, visualización de la barra de progreso de carga

Instale una dependencia en ejecución, nprogress

Luego importe el paquete, llame a la visualización del objeto y oculte

en principal

Darse cuenta del efecto de mostrar la barra de progreso y ocultar la barra de progreso según el interceptor

Si se activa el interceptor de solicitud, prueba que se inicia la solicitud y se espera que se muestre la barra de progreso.Si se activa el interceptor de respuesta, se prueba que se desea ocultar la barra de progreso.

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

Optimización 2. Eliminar todas las tareas de la consola

La declaración de la consola será una advertencia al compilar, por lo que debe instalar un complemento para eliminar toda esta declaración.

babel-plugin-transfrom-quitar-consola

Eliminar todo el código de la consola

Esta vez, las dependencias de desarrollo están instaladas.

Use este complemento, //Si hay un error en el complemento anterior, instale el siguiente con s para ejecutarlo,

En archivo babel.config,js

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

pero necesita atención

No hay problema si esta declaración se usa en la fase de lanzamiento del proyecto, pero si hay un problema en la fase de desarrollo o prueba del proyecto

Si solo desea usarlo en la fase de lanzamiento, necesita

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

En segundo lugar, genere un informe de embalaje

Los problemas existentes en el proyecto se pueden encontrar de forma más intuitiva,

Optimización 3, modifique la configuración predeterminada de webpack a través de vue.config.js

La página web no se puede encontrar en el proyecto ahora. El proyecto generado por vue-cli 3.0 oculta todos los elementos de configuración del paquete web de forma predeterminada. El propósito es permitir que el programador se centre en la lógica comercial específica.

Al crear el archivo de configuración vue.config.js en el directorio raíz del proyecto, puede personalizar el proceso de empaquetado y publicación del proyecto.

Optimización 4, especificando diferentes entradas de empaque

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

Haz dos copias de main y cámbiale el nombre

Optimización 5, reducir el tamaño del primer recurso de archivo

6. Cargue recursos CDN externos a través de externos

De manera predeterminada, los paquetes dependientes de terceros importados a través de la sintaxis de importación eventualmente se empaquetarán y combinarán en el mismo archivo, lo que generará el problema de que el tamaño de un solo archivo es demasiado grande después de que el paquete se realiza correctamente.

Para resolver los problemas anteriores, puede configurar y cargar recursos CDN externos a través del nodo externo de webpack. No se empaquetarán todos los paquetes dependientes de terceros declarados en externals.

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

Pero puedes ver que element-ui sigue siendo muy grande

Para reducir el volumen de este

7. Optimizar el empaquetado de ElementUI a través de 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] Gestión de fondo - Optimización y lanzamiento de proyectos