Ejecute npm run build y acceda al proyecto después de implementar el código empaquetado. Encontrará que el rendimiento es muy malo y la página estará en blanco durante mucho tiempo. Este es un problema de rendimiento intolerable y necesita una solución urgente.
1. Carga diferida de enrutamiento.
Componente de importación de ruta original
import Index from @/views/index.vue;
{
path: '/'
name: 'index'
component: Index
}
Ahora introduzca el enrutamiento (componente asincrónico vue)
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
{
path: "/",
name: "index",
component: resolve => require(["@/views/Index"], resolve)
}
Método de importación propuesto por ES (comúnmente utilizado)
const HelloWorld = () => import ('La dirección del módulo que se va a cargar')
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
2. Carga diferida de componentes
La redacción del componente original:
<template>
<div>
<span></span>
<One-com></One-com>
</div>
</template>
<script>
import One from './one';
export default{
components:{
"One-com": One,
},
data(){
return{
num: 0
}
}
}
</script>
método const
<template>
<div class="hello">
<One-com></One-com>
1111
</div>
</template>
<script>
const One = ()=>import("./one");
export default {
components:{
"One-com":One
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Método asincrónico:
<template>
<div class="hello">
<One-com></One-com>
1111
</div>
</template>
<script>
export default {
components:{
"One-com":resolve=>(['./one'],resolve)
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
3. El servidor abre gzip. El efecto de optimización de este paso es el más significativo
El primer paso es configurar y habilitar gzip en vue-config.js.
// 安装插件
npm i --save-dev compression-webpack-plugin
// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
.....
module.exports = {
....
configureWebpack: config => {
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}))
}
}
}
Paso 2 Inicie gzip en el servidor WEB. Tome mi nginx como ejemplo aquí.
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
4. Habilite la aceleración de CDN.
El uso de Gzip ha reducido el tamaño del archivo en dos tercios. Si aún no es suficiente, separe el código o la biblioteca que es poco probable que cambie, continúe reduciendo los proveedores de fragmentos únicos y luego acelere la carga de recursos a través de la CDN.
(Para vue, vuex, vue-router y vue-moment, use cdn para introducir. Además, el cliente también puede introducir resaltar cdn, pero el lado de la administración no lo necesita. Por lo tanto, se requieren dos plantillas html diferentes. la configuración es la siguiente :)
(1), vue.config.js continúa uniéndose según el paso anterior
config.externals的配置，如下：
configureWebpack: config => {
if (isProduction) {
config.plugins.push(
new CompressionWebpackPlugin({
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240,
minRatio: 0.8
})
);
config.externals = {
vue: "Vue",
"vue-router": "VueRouter"
};
}
}
(2) Bloquear o eliminar todos los lugares donde se introdujeron originalmente vue y vue-router.
//原来对vue、vue-router的引用全部注释掉。
//涉及所有引用的文件，只要有引入就注释掉。
// import Vue from "vue";
// import Router from "vue-router";
//vue-router的非cdn引用
//Vue.use(Router);
(3) Cuando use vue-router en el código, use VueRouter.
//cdn 引入vue-router时，源码抛出的变量是：VueRouter
console.log(VueRouter);
Vue.use(VueRouter);
//Vue.use(Router); 继续像原来一样用Router就会报错。
Pre-renderizado
El problema resuelto por la solución anterior es reducir el tamaño de los recursos js para acelerar la velocidad de carga. Dicha solución es lo suficientemente rápida para el renderizado de la primera pantalla cuando la red es buena, pero después de todo, el renderizado depende de la ejecución. lógica después de que se completa la carga de js, y este enfoque no es propicio para SEO. Luego hay dos soluciones para mejorar aún más la carga de la primera pantalla, una es la pre-renderización y la otra es SSR, que es la renderización del lado del servidor. La última es más complicada. La analizaré en un artículo futuro. El método de renderización del lado del servidor es similar. En comparación con la renderización previa, la principal ventaja es que puede empalmar datos dinámicamente y devolverlos como parte del documento, logrando así funciones de intercambio dinámico y SEO más amigables.
La representación previa se basa en un complemento prerender-spa-plugin, que primero debe introducirse en webpack.prod.conf.js, de la siguiente manera
const PrerenderSPAPlugin = require('prerender-spa-plugin')
Luego, agregue la siguiente configuración de complementos en los complementos:
new PrerenderSPAPlugin(
path.join(__dirname, '../nginx/blog'),
['/'],
{
//在一定时间后再捕获页面信息，使得页面数据信息加载完成
captureAfterTime: 50000,
//忽略打包错误
ignoreJSErrors: true,
phantomOptions: '--web-security=false',
maxAttempts: 10,
}
)
Después de esta configuración, el archivo index.html empaquetado contiene la estructura de dom renderizada previamente, por lo que la velocidad de renderizado de la primera pantalla mejorará enormemente. Pero hay un problema al que prestar atención aquí. El archivo de fragmentos después del enrutamiento cargado asincrónicamente se inserta en la etiqueta principal y tiene un atributo asíncrono, como se indica a continuación:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Blog - SilentPort</title>
<link href="/static/css/client.6b5a982c3673872dbaa1a8891279d36d.css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" async="" src="/static/js/3.c925dfc72043d1d1d5ac.js"></script>
</head>
El archivo de manifiesto en tiempo de ejecución se encuentra en la parte inferior del cuerpo. Debido a que la asíncrona hará que el proceso de carga y procesamiento de elementos del documento subsiguientes y la carga y ejecución de la secuencia de comandos actual continúe en paralelo (asincrónicamente), esto hará que la secuencia de comandos para ser ejecutado antes del manifiesto Producirá un webpackJsonp no está definido error. Por lo tanto, debe cambiar manualmente async para aplazar antes de la implementación. Esto último también se realizará en paralelo con la carga del script actual durante el proceso de carga de los elementos del documento subsiguientes (asincrónicamente), pero se ejecutará la ejecución del script actual después de analizar todos los elementos., Finalizado antes de que se active el evento DOMContentLoaded, lo que garantiza que el script se ejecutará en el manifiesto posteriormente.
Artículo de referencia: https://www.jianshu.com/p/da46f410156a?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation