Cómo optimizar la configuración del paquete web
El proyecto reciente pasó por el período de mayor actividad de infraestructura a principios de año y se ha ido calmando gradualmente. Voy a registrar mis medidas recientes de optimización del paquete web, con la esperanza de aprender del pasado y del presente. futuro.
Este proyecto utiliza el depósito de la serie vue y la configuración de compilación se mejora en función de vue-cli. Con respecto a la configuración original del paquete web, puede leer este artículo Análisis de la configuración del paquete web vue-cli#2.0. Este artículo básicamente proporciona una explicación detallada de cada línea de código en el archivo, lo que ayudará a todos a comprender mejor el paquete web.
Después de resumir cuidadosamente, los puntos que optimicé son básicamente los que circulan en Internet.
Extraer bibliotecas de uso común y hacer referencia a cdn a través de configuración externa.
Configurar adecuadamente CommonsChunkPlugin Aproveche al máximo el complemento aliasdll para habilitar proyectos de compilación multinúcleo happypack precompilados
externos
Dirección del documento mons-chunk-plugin/
El complemento CommonsChunkPlugin in es una característica opcional, use Se utiliza para crear un archivo independiente (también llamado fragmento), que contiene los fragmentos de entrada de múltiples módulos de **** públicos
. Con la fragmentación, el archivo compuesto final se puede cargar una vez al principio y luego almacenarse en caché para su uso posterior. Esto mejorará la velocidad porque el navegador extraerá rápidamente el código de acceso público del caché en lugar de cargar un archivo más grande cada vez que se visita una nueva página.
resolve.alias
Dirección del documento ponent/tooltip', 'echarts/lib/component/title', 'echarts/lib/component/legend', 'echarts/lib/component ' /dataZoom', 'echarts/lib/component/toolbox'],
},
salida: {
ruta: ruta.join(dirname, ' dist-[hash]'),
nombre de archivo: '[nombre].js',
biblioteca: '[nombre]',
},
complementos: [
nuevo webpack.DllPlugin({
ruta: path.join(dirname, 'dll', '[ nombre]-manifest.json ' ),
nombre de archivo: '[nombre].js',
Nombre: '[nombre]',
}),
]
};
La configuración básica es básicamente la misma que la del paquete web. Creo que cualquiera que haya leído la optimización entenderá el significado, así que no lo explicaré más. . Luego ejecute el código para compilar el archivo.
(Mi archivo de configuración se coloca en compilación, la siguiente ruta debe cambiarse de acuerdo con la ruta del proyecto)
webpack -p --progress --config build/webpack.dll.config.js
Cuando se complete la ejecución, se generarán dos nuevos archivos en el mismo directorio. Uno se genera en verdor.js, que contiene el código comprimido de la biblioteca dependiente que se acaba de importar; .verdor-manifest.json, que indexa cada biblioteca por número, usando id en lugar de nombre.
A continuación, solo necesita agregar una línea de código al complemento en el archivo de configuración de su paquete web y listo.
const manifest = require('./dll/vendor-manifest.json');
...
...
complemento: [
nuevo paquete web.DllReferencePlugin({
contexto: nombre de directorio,
manifiesto,
}), p>
]
En este punto, es hora de ejecutar el comando webpack. Puede encontrar que el tiempo ha disminuido directamente de 40 segundos a aproximadamente 20 segundos, que es el doble de rápido (. No sé si es porque depende demasiado de Muchas bibliotecas son así, por lo que tienes que cubrirte la cara manualmente).
2. Compilación multiproceso de happypack
Generalmente, node.js se compila en un solo subproceso y happypack es el comienzo de la construcción de subprocesos múltiples del nodo, lo que mejora en gran medida la velocidad de construcción. . El método de uso también es relativamente sencillo. Tomando mi proyecto como ejemplo, cree un nuevo proceso happypack en el complemento y luego use el cargador para reemplazar la identificación correspondiente donde se usa
var HappyPack = require('happypack'); >
...
...
módulos: {
reglas: [
...
{
prueba：/\.js$/,
cargador: [ 'happypack/loader?id=happybabel' ],
incluir :[resolve('src')]
},
...
]
},
...
...
plugin: [
//happypack tiene soporte limitado para el cargador de URL, el cargador de vue y el cargador de archivos, y errores y se informarán errores.
nuevo HappyPack({
id: 'happybabel',
cargadores: ['babel-loader'],
hilos: 4. //cuántos subprocesos utiliza HappyPack para compilar
}),
new HappyPack({
id: 'scss',
hilos: 4,
cargadores: [
'style-loader',
'css-loader',
' sass-loader'.
],
})
]
En este punto, continúe ejecutando el código para compilar el paquete web. e imprimir. La consola cambiará a un mensaje diferente. El tiempo de compilación también se ha optimizado de 20 a aproximadamente 15 (no se siente tan grande como se dice en línea, no sé si es porque js tiene demasiado peso).
3. Haz buen uso de los alias
3. Coopera con resolve y haz buen uso de los alias
Originalmente no había un tercer punto, pero busqué Artículos relacionados con la optimización del paquete web en Internet Cuando vi a alguien usándolo, mencioné que el archivo debe introducirse en el archivo proporcionado por la biblioteca (el principio que entiendo es en realidad: 1. Primero busque la ubicación del archivo especificado a través de). resolver y limitar el alcance de la búsqueda; 2. Busque el archivo proporcionado por la biblioteca directamente según el alias (la ubicación del archivo);
El consejo en el archivo de configuración de vue-cli también menciona esto, es decir, el siguiente código
resolver: {
// Expandir automáticamente la extensión del archivo , esto significa que nuestro módulo require puede omitir el nombre de la extensión
extensiones: ['js', '.vue', '.json'],
Los alias de módulo se definen para facilitar la referencia directa a alias sin escribir direcciones largas
alias: {
'vue$': 'vue/dist/vue.js', //esta es la línea de código que le proporciona una referencia directa al archivo
'@': resolve( 'src'),
}
},
Luego reemplacé todas las demás referencias a vue en todos los demás lugares después de vue$, por ejemplo
// import 'vue';
import ' vue/dist/vue.esm.js';
El tiempo resultó ser de 12 segundos, lo que también me sorprendió.
Luego reemplacé jquery, axios, vuex, etc. Se ha optimizado a aproximadamente 9 segundos, magnífico, O (∩_∩) O ~~
4. Actualización de Webpack3
Originalmente no había un cuarto punto, solo vi la cuenta oficial. Cuando se lanzó, escribí un artículo sobre algunas ventajas nuevas de actualizar a webpack3, como Scope Hoisting (básicamente no hay grandes problemas al actualizar webpack2 a webpack3).
Al agregar un nuevo complemento
// 2017-08-13 combinado con las nuevas funciones proporcionadas por la última actualización de webpack3, el código comprimido se puede hacer más pequeño y ejecutarse más rápido
...
complemento: [
new webpack.optimize.ModuleConcatenationPlugin(),
]
Sin embargo, después de agregar esto Línea de código, el tiempo de compilación no ha cambiado mucho, pero no he probado la eficiencia de ejecución, así que no sé cómo son los nuevos efectos.
Bueno, básicamente siento que Estos efectos son los más optimizados para el proyecto, aunque no duran tanto como 3 o 4 segundos como se menciona en Internet. El tiempo es muy extraño, pero parece que 8 o 9 segundos son suficientes.
Creo que dominas el método después de leer este artículo. Para obtener más información interesante, ¡presta atención a otros artículos relacionados en Gxl.com!
Lectura recomendada:
Mostrar estilos CSS en Angular 4
Caso de uso de comunicación de componentes integrados de Vue