Se agregó la barra de progreso de optimización del proyecto
-
Instale nprogress, la interfaz de usuario depende de las dependencias de instalación, solo busque nprogress para instalar
-
Importar el componente de la barra de progreso en main
// Importar el complemento de la barra de progreso import NProgress from'nprogress ' // Importar el estilo de la barra de progreso import'nprogress / nprogress.css'
-
Utilice NProgress.start () para mostrar la barra de progreso
NProgress.start ()
-
Utilice NProgress.done () para ocultar la barra de progreso
NProgress.done ()
Quitar la consola empaquetada
-
安装 babel-plugin-transform-remove-console
-
Agregue "transform-remove-console" en el nodo de complementos
"plugins": [ [ "componente", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], "transform-remove-console" ]
Solo retire la consola durante la fase de lanzamiento
-
Utilice process.env.NODE_ENV para determinar si la versión actual es la etapa de desarrollo
prodPlugins var = [] si (process.env.NODE_ENV == 'producción') { prodPlugins.push ( 'transformar-remove-consola') } -
Utilice el operador de expansión para pasar los complementos de la matriz a los complementos
"plugins": [ [ "componente", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], ... prodPlugins ]
Utilice vue.config.js para modificar la configuración predeterminada de webpack
-
Cree el archivo vue.config.js
-
Un objeto de configuración está expuesto dentro de js
module.exports = { }
Archivo de entrada personalizado
-
Utilice chainWebpack para configurar diferentes entornos para establecer diferentes archivos de entrada
chainWebpack: config => { // El entorno actual es la etapa de lanzamiento config.when (process.env.NODE_ENV == 'production', config => { config.entry ('app'). clear (). add (' ./ src / main-prod.js ') }) // El entorno actual está en la etapa de desarrollo config.when (process.env.NODE_ENV ==' development ', config => { config.entry (' app ') .clear (). add ('./ src / main-dev.js') }) }
Cargar recursos externos a través de cdn
-
Debido a que el archivo de importación se importa al paquete a través de la importación, eventualmente se empaquetará en el mismo archivo js, lo que hace que el archivo de chunk-vendors sea demasiado grande
-
Dado que estos archivos están empaquetados en el mismo archivo js, el volumen es demasiado grande, así que ignore algunos archivos js y no el paquete (solo es necesario configurar la etapa de lanzamiento)
// Use externals para establecer exclusiones config.set ('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor' }) -
Aunque algunos archivos js se ignoran, todavía hay algunos archivos css en el archivo de entrada que son relativamente grandes, así que elimine directamente el css importado
import VueQuillEditor from'vue-quill-editor ' // Editor de texto enriquecido import'quill / dist / quill.core.css ' import'quill / dist / quill.snow.css 'import'quill / dist / quill.bubble. css '
-
Después de eliminar el css anterior sin empaquetar, el estilo final definitivamente será problemático, por lo que presentamos el archivo de recursos de cdn en index.html en público
<! - Archivo de hoja de estilo de nprogress -> <link rel = "stylesheet" href = "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" /> <! - Style archivo de hoja para el editor de texto enriquecido -> <link rel = "stylesheet" href = "https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel = " hoja de estilo "href =" https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css "/> <link rel =" hoja de estilo "href =" https: //cdn.staticfile .org /quill/1.3.4/quill.bubble.min.css "/>
-
También ignoramos que el archivo js correspondiente no está empaquetado, por lo que también introducimos directamente recursos cdn en index.html en público
<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/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 "> </ guión>
Configurar el recurso cdn de element-ui
-
Elimine el elemen.js importado bajo demanda en el archivo de entrada
-
Importar el recurso cdn del elemento
<! - El archivo de hoja de estilo de element-ui -> <link rel = "stylesheet" href = "https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" /> <! - archivo js de element-ui -> <script src = "https://cdn.staticfile.org/element-ui/2.13.0/index.js"> </script>
Personalice el contenido de la página de inicio diferente según los diferentes entornos
Necesitamos determinar si el entorno actual es la etapa de desarrollo o la etapa de lanzamiento en index.html, pero process.env.NODE_ENV no se puede obtener en index.html, pero los datos de configuración del complemento htmlWebpackPlugin se pueden obtener en index .html.
¿Por qué?
-
La primera función obtiene index.html y genera un nuevo index.html
-
Los archivos js y css empaquetados se introducirán automáticamente
-
Si es la etapa de publicación, agregamos una bandera a htmlWebpackPlugin como verdadero
// Use el complemento config.plugin ('html'). Tap (args => { // Agregar parámetro isProd args [0] .isProd = true return args }) -
Si está en la etapa de desarrollo, agregue un logotipo, que es flase
// Use el complemento config.plugin ('html'). Tap (args => { // Agregar parámetro isProd args [0] .isProd = false return args }) -
Obtenga el logotipo a través de htmlWebpackPlugin en la página y juzgue si el logotipo es verdadero o falso. Si es verdadero, significa la etapa de lanzamiento, debe agregar el recurso cdn, si es falso, no es necesario agregarlo. .
<% if (htmlWebpackPlugin.options.isProd) {%> archivo de recursos cdn <%}%>
Implementar la carga diferida de enrutamiento
También conocido como: enrutamiento de carga bajo demanda
Cuando una ruta coincide, se carga el archivo de recursos correspondiente
-
安装 @ babel / plugin-syntax-dynamic-import
-
Configurar complementos de babel
"plugins": [ [ "componente", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ], ... prodPlugins, "@ babel / plugin-syntax-dynamic-import" ] -
Modificar el método de introducción
// Página de inicio de sesión const Login = () => import (/ * webpackChunkName: "login" * / '.. / components / Login.vue') // Página de inicio const Home = () => importar (/ * webpackChunkName: "HomeWelcome" * / '.. / components / Home.vue') const Welcome = () => import (/ * webpackChunkName: "HomeWelcome" * / '.. / components / Welcome.vue') // Lista de usuarios const User = () => import (/ * webpackChunkName: "usuario" * / '.. / components / user / Users.vue') // Gestión de derechos const Rights = () => import (/ * webpackChunkName: "Derechos" * /'../components/power/Rights.vue ') const Roles = () => import (/ * webpackChunkName: "Derechos" * /' .. / components / power / Roles.vue ') // Gestión de productos básicos const Categorías = () => importar (/ * webpackChunkName: "mercancías" * / '.. / componentes / mercancías / Categorías.vue') const Params = () => importar (/ * webpackChunkName: "bienes" * / '../components/goods/Params.vue') const Bienes = () => importar (/ * webpackChunkName: "bienes" * / '../components/goods/Goods.vue') const GoodsAdd = () => importar (/ * webpackChunkName: "bienes" * / ' ../components/goods/GoodsAdd.vue ') // 订单 管理 const Orders = () => import (/ * webpackChunkName: "goods" * /' ../components/orders/Orders.vue ') // 数据管理 const Reports = () => importar (/ * webpackChunkName: "mercancías" * / '../components/Reports.vue')