Autor | Ali entretenimiento front-end experto en desarrollo Peng Su
Zebian | Tu Min
Figura cabeza | RDCC descargar desde la visión de China
introducción
▐ herramienta de front-end para la evolución de construcción
Recordemos que en 2015--2016 años, cuando se inició volvieron gradualmente a partir de la amplia utilización de la herramienta de tareas ronco Runner desarrolladores, Pipeline transferido a Gulp esta forma de herramientas. Gulp también se puede personalizar con el número de plug-ins (como el trago-streamify), de modo que toda la parte delantera del enlace está listo para el trabajo, se convierten en claros y fáciles de controlar, tales como actualizar la página, el código se compila y compresión, y así sucesivamente. Automatizado herramienta de "línea de montaje" para reemplazar una gran cantidad de trabajo manual complicado, se puede decir que el sentido de diferentes edades. Es a la webpack, su esencia se basa en un pensamiento "modular" "JS precompila" soluciones, nacimiento prematuro y otros programas similares también Browserify y webpack pertenecen a diferentes fracciones de la misma puerta que sea.js así o require.js, tanto necesidad de "confiar en la línea" intérprete compilados.
Proyecto Hoy en día, la mayoría de los contactos de trabajo diario, ya abandonar completamente el trago. Pero a veces trabajan en contacto con algunos viejos proyectos, uso y mantenimiento de Gulp son comunes. Cuando el inicio de 2019, a través de un viejo proyecto (trago 3.x + webpack 3.x) mejoras tecnológicas, la oportunidad de entender la dinámica trago 4.x, sino también una reminiscencia trago-browserify y trago-webpack ( hace cinco años en libertad, actualmente rebautizado webpack-stream). Por lo tanto, una solución webpack lo más vertical, por supuesto, estar en manaually incorporada Gulp. En la toma webpack "plan" y clase "herramientas" Gulp hacer comparación positiva cuando ambos necesidad de aclarar el alcance y las ideas para resolver el problema. Hoy, una vez más revisar la historia del desarrollo de la evolución de la tecnología de la orden, tener un concepto objetivo básico.
En 2017, cuando, Gulp y webpack sobre el uso del usuario y "seguirán usando" la intención no es malísimo. Sin embargo, "Estado de Javascript 2019" se puede ver, webpack se ha desplegado por completo otras herramientas y bibliotecas, se ha convertido en el primer ministro ampliamente utilizado por todo el mundo, la discusión herramienta de construcción. 25 de de febrero de, 2018 webpack versión oficial 4.0.0 liberado; se trata de una gran cantidad de proyectos se han actualizado webpack versión 4.10.2, antes y después del Año Nuevo, a su vez parte de un proyecto para actualizar a la última versión 4.29.0. Esta serie de "mejoras de seguimiento" en un lado, la continua webpack la integración de nuevas ideas y conceptos para construir el módulo, con el fin de adaptarse mejor a los cambios futuros (webpack versión beta 5.x debe terminar pronto estará disponible a), por otro lado, es un programa bueno tratar constantemente para optimizar la combinación de proyectos de infraestructura para mejorar la eficiencia, garantizar la estabilidad del producto.
▐ esta revisión
herramienta webpack aunque una pequeña parte del proyecto es sólo el proceso punta CI (acumulación de acumulación), en sus propios términos, el paquete de nodo depende del conocimiento y la experiencia relacionada con la gestión, es un pedazo de habilidad. Detalles de vista, lo que implica la webpack sus paquetes y la ecología complemento de terceros, sino también con Babel apropiado múltiples funciones ecológicas, mecanografiado, flow.js, configuración eslint, etc., para hacer frente a la lengua misma compilado Javascript / traducción. Y, el derecho de administrar ruta local y remota de archivos archivos de recursos estáticos recursos CDN (configuración de empaquetado determina resultado lleno), relacionada con el conocimiento de varios dominios y servicio de capa conocimiento configuración de la plantilla de configuración de nodo. Más allá, la NGP muchos gestión de versión del paquete irritante problema. Numerosos detalles triviales que, bajo la premisa de todas las herramientas de terceros cuando se usa correctamente, y quizás algún aparato plug-in, los desarrolladores tienen que ir de la investigación y el desarrollo. Gran linaje conocimiento es evidente.
Este artículo no describe guía del usuario webpack Docs, ni describen el uso de terceros plug-in "se refiere al Norte". Más proyecto es una combinación de la experiencia pasada, la práctica de la grabación obtenida mediante la técnica, también grabó una serie de desvíos problema esperanza llevado a muchas otras personas en la tecnología de front-end puede jugar un poco de referencia. (Pena de paquete para el control de lista: Reaccionar: 16.3.2, Babel: 7.0.0, webpack: 4.29.0, el Nodo: 11.8.0)
Estructura de archivos
En anteriores versiones 4.x, un comando en el conjunto de herramientas de CLI es el paquete principal webpack viene, pero la versión posterior 4.x webpack, la webpack-cli retira como un paquete separado, una por separado realizado manualmente puede instalar tnpm de Inicia este comandos de script. En segundo lugar, el desarrollo / entorno cotidiano (dev) y pre-desarrollo / entorno de producción (prod), la estrategia de embalaje es muy diferente:
1. Para entorno de desarrollo todos los días:
depuración conveniente y Solución de problema, una asignación de fuente relativamente fuerte;
Estamos con la esperanza de obtener un tamaño de partícula pequeño, y de acuerdo con una variación de carga del código enfocados (recarga en vivo / reemplazo del módulo caliente);
Esperanza de hacer algunos proxy de depuración relacionada con el proxy;
Puede fácilmente desarrollador de acuerdo a la situación, la configuración dev-servidor local y similares.
2. Para entorno de producción Prod:
Por la compresión javscript / código CSS adquirió volumen de carga de archivo más pequeño;
Para obtener una mejor estrategia de carga desmantelando el paquete, lo que reduce el tiempo de carga;
Asignación de origen relativamente ligero (por supuesto, cuando usted necesita un poco de registro de seguimiento e información de alarma es otra ronda de escenarios);
Algunos aspiraciones línea de productos personal (por ejemplo, para el mismo código Javascript puede ser un archivo de estilo de juego diferente) y así sucesivamente.
3. Evaluación de eficiencia típicamente tiene las siguientes dimensiones principales, la fuente de datos mencionado constante sobre todo en los tres primeros:
compilación de desarrollo local (w / o NO DLL DLL)
Desarrollo local re-compilación (w / o NO DLL DLL)
Local compilación de prueba (la parte clave analizar webpack análisis)
duración nube de construcción (NO DLL o configuración de la DLL de soporte OSS)
En la nueva versión de webpack, webpack de combinación: 4.2.1 El uso de un paquete separado, los desarrolladores pueden utilizar el archivo webpack.common.js parte pública del desarrollo y entorno de producción se configura, para webpack.dev.js entorno de desarrollo, webpack.prod.js para entornos de producción. Después de distinción, las diferencias de configuración entre los dos entornos, de un vistazo:
(FIG: estructura de archivos de configuración webpack)
Sobre cz.config.js y flowGlobalVars.js dentro "punto de tema" mucho, no se centran en la descripción de este documento.
Si es necesario configurar el archivo DLL (charla se centrará en la optimización, abajo), también tenemos que añadir webpack.dll.js empaquetados individualmente archivo de configuración. Por supuesto, DLL es en realidad un archivo normal de salida, cuando podemos module.exports en el archivo de escritura, webpack.common.js dos zonas separadas. Esto no es una fórmula flexible muy común (Exportación de múltiples configuraciones), es posible que más de entender el concepto de módulos de E archivo de E / y el módulo.
Base de configuración / personalizada
▐ CommonsChunkPlugin se sustituye
Se trasladó a webpack.optimization.splitChunks en. Desembalaje de control de segmentación y tamaño de las partículas, se trata en realidad de optimización nivel webpack ha hecho mucho por nosotros, es en sí misma la base de un conjunto de estrategia de optimización por defecto. Analogía de vista, Reaccionar algoritmo diff ecológica que en sí es también un mecanismo de política, más optimizadas, los usuarios pueden añadir de devolución de llamada métodos dentro del objeto, para perfeccionar su propio control.
Debe tenerse en cuenta sobre todo que cacheGroups, cuando lo que se necesita no es borrar la memoria caché, o cuando el control del tamaño de partícula no es bueno, por lo que la rama cortada nos ha traído una gran cantidad de archivos redundantes. El siguiente código define una vendedores objetos, entonces nuestro archivo de salida (no incluye chunksFiles) cada uno va a generar un archivo de caché. Hay app.bundle.js de salida añadido y polyfill.bundle.js, una vez que se une a los objetos de los vendedores, el embalaje tiempo extra generará dos documentos, a saber, los vendedores y proveedores-app.js-polyfill.js. Aunque no se preocupe por el contenido de estos dos documentos será volver a empaquetar el código en él, que sólo hay que poner algún índice de caché, pero los dos archivos si no está seguro de qué hacer, cuándo usarlos, cacheGroups los ajustes, necesita seriamente volver a tener en cuenta.
▐ OccurrenceOrderPlugin
no es en sí mismo por debajo de un constructor de la clase webpack, pero fue renombrado (nombre anterior porque la palabra está mal escrita), y luego se puso a una nueva ubicación, llamar a la necesidad de re-escritura: nueva nueva webpack.optimize.OccurrenceOrderPlugin () .
▐ más concisa (el valor predeterminado incorporado en el kit de herramienta de compresión)
La nueva versión de webpack.optimization.minimizer, defecto de la herramienta se ha cambiado desde los viejos uglifyJS los terserJS, viejo afear depreacted ha sido procesado en incorporada, creo que poco después de que el estado se convertirá en el legado, el nuevo más concisa más buen rendimiento, un mayor apoyo a la sintaxis ES6 + también es compatible con el babel ecológica 7, demandas simultáneas de otro código de la biblioteca de compresión de terceros. Actualmente estoy usando más concisa-webpack-plugin, y la configuración de los parámetros generales más concisa hay algunas diferencias, la necesidad de introducir manualmente su propia (documento oficial recomendado).
▐ module.rules.exclude [0]
module.rules.exclude [0] archivo de direcciones de escritura, requisitos más estrictos (versiones futuras 4.11.0).
En el pasado, cuando hacemos configuración module.rules, algunos archivos que no quieren ser atravesado, a continuación, se excluye este parámetro de configuración, que se omite, a veces usando 'src / contianer / xx.jsx' tales términos, si índice de camino múltiple, que pondría una matriz similar. Sin embargo, un enfoque de este tipo, no está permitido en la nueva versión, sólo podemos utilizar path.resolve () o / regExp / redacción de la declaración para hacer frente a la ruta del archivo. (Bonus Consejos básicos, Cómo escribir y establecer rutas regulares y específicos, como espero que todos incluyen paquete de NPM más un src especificada: /(src\/.*)|(node_modules\/.*@ali\/lark- componentes) /)
▐ Alias y ruta absoluta
webpack en el paquete, que en general tienen que hacer para encontrar la ruta al archivo, buscar, lo que necesita saber exactamente la ubicación y el referencias citadas en relación, lo que permite un mapeo mapeo completo sabe toda la relación. Reducir esta sobrecarga, podemos considerar a alias configure, la escritura de este modo un camino recorrido relativo absoluta en lugar de un montón de escritura. Los beneficios de la misma, por un lado, es ayudar a webpack más rápido para localizar la ubicación del archivo, por otra parte, para escribir, no entonces ser introducido '../../*' o '../../../*' y con problemas.
WebStorm en busca de la ruta absoluta: a webpack elementos de configuración en la ruta del archivo de configuración que se incorporó como webpack, WebStorm IDE encontrará sus alias de la relación correspondiente.
VSCode en busca de la ruta absoluta: los niveles de plugins encontraron ninguna manera buena, si el proyecto está siendo utilizado a máquina, puede ser configurado para compilar los artículos pertinentes en el interior tsconfig.json, se puede lograr el mismo efecto que el anterior WebStorm.
▐ panorama subir CDN
Una vez subido CDN puede reducir sustancialmente el volumen de paquetes. Además, webpack usted no necesita preocuparse por la ruta del archivo de índice de esas imágenes. proyecto un poco más grande, la imagen local de la situación 5Mb ~ 10Mb muy común en necesidad urgente de optimización.
▐ devserver capacidades de proxy Proxy
La capacidad de investigación, gracias a la transformación de una capa de petición. Apelación es para entregar simbólico ya no se muestra, pero para lograr encabezado por el relleno. En el desarrollo del medio ambiente local, que suelen utilizar jsonp para resolver el problema de dominios cruzados, pero su esencia es realmente incrustado en una página web para un <script />, la información, naturalmente, no se puede escribir de cabecera que no es consistente con nuestra intención original, no para satisfacer la demanda. Así que para un problema de este tipo de dominios cruzados, tenemos unos pocos parámetros simples, iniciar en ambos extremos de la solicitud y devolución de las solicitudes se hicieron configuración de proxy "engañar" la "fuente de origen", para resolver el desarrollo local entre dominios problema:
devServer: {
// ...
headers: {
'Access-Control-Allow-Origin': '*', // CORS
},
proxy: { // for ajax cors
'/h5/ajaxObj': {
target: 'http://xxx.xxx.xxx.com',
onProxyReq: (proxyReq) => {
proxyReq.setHeader('Origin', 'http://xxx.xxx.com');
},
onProxyRes: (proxyRes) => { // …},
},
},
},Optimizar el rendimiento por el Nodo / Happypack
Configuración básica y la configuración personalizada necesidad ha sido, tiempo para construir todo el proyecto es probable que todavía muy insatisfactoria, el proyecto de prueba actual se menciona en este documento, hay cerca 57s de tiempo, todavía hay muchos lugares no compensa pueden optimizarse el espacio es muy grande.
El primer paso puede ser centrarse la versión siguiente nodo, probado, puede aumentar la velocidad total es de al menos el 30% de las cosas, sobre todo en la versión nodo V8 de la V10, cuando se registra lo siguiente en el tiempo antes de hacer otro proyecto de transformación datos:
versión nodo |
v 8.x |
v 10.x |
compilar |
32s - 36s |
26s |
recompilación |
8s 9s - |
4s |
Pero esta vez, después de que el proyecto de actualización directamente a v 11.x encontró que con el compilador nodo-Sass para construir el proyecto se vino abajo. Dimos cuenta de que versión nodo-Sass también requiere una versión correspondiente de la actualización. También probado el efecto de Babel v 6.x actualizar la versión 7.x v, babel pensado en un principio importante actualización de la versión traerá una velocidad considerable aumento de compilación, de hecho, no es lo ideal (esencialmente insignificante).
Se tiene la intención de abrir las capacidades multi-threading, paquete modular para hacer frente a los que están dentro de los cargadores, que es la ejecución de una sola rosca de este trabajo. Mejorar la eficiencia Happypack la primera compilación de todo el proyecto, el efecto es de aproximadamente 20%, más obvio. Al añadir la capacidad Happypack, hay dos puntos a destacar:
Su apoyo a archivo-cargadora y url-loader no es bueno, se puede considerar, sin Después de todo, proyectamos imágenes dentro de la clase (la mejor carga CDN) y el tipo de archivo muy estándar es sólo una pequeña parte;
Esto también trató de ts-loader añadido a la multi-hilo, pero ha habido muchos problemas de compilación. Mi sospecha personal es alta probabilidad de problemas de configuración, pero vistazo al proceso para ver un montón de cuestiones TS-loader y compatibilidad ecológica ts dependen problema. El proyecto se encuentra actualmente sólo un archivo de unos Ts, como un intento, la mayoría de los archivos son también .jsx y Js, por lo que para la primera sin añadir capacidad Happypack ts.
Optimizar el rendimiento por la DLL / Optimización
En primer lugar necesidad de utilizar algunas herramientas de análisis, como por ejemplo: webpack-haz-analizador, a través de esta herramienta, se puede construir todo el (proceso utilizado para la producción de construcción, webpack Analizar para, no compila) el proceso y los resultados de análisis de datos en el gráfico para que no surjan problemas específicos en el lugar. Y luego aprender lo que requiere DLL sí divididas. se obtienen los siguientes en el primer análisis:
Esta imagen de 3532 módulos y 62 trozos puede ver la situación después de módulos y bloques específicos división. Buscamos más intuitivo en este cuadro abajo, se puede ver el tamaño Analizada, archivo de entrada (7.09MB) y la porción principal (2.04MB, sobre todo algunos Primero debe node_module carga) son de tamaño exagerado, y no node_modules la bolsa de envasado es sustancialmente once, ordenada:
Con estos resultados, la idea de la solución correspondiente es muy clara: hay que sacó primero node_modules de uso común (Este es el significado de la DLL), y luego a ser analizados uno por uno, a no ser utilizado con frecuencia eran node_module (sólo algunas páginas uso, no tiene una característica común) también se señala a.
Para Reaccionar proyecto React Reaccionar-Dom, Reaccionar-router, Redux, etc., pero también algunas de las bibliotecas de terceros más grandes, como ANTV o G2 relacionados DLL debe estar sacada:
El número de módulos disminuyó de 3.532 mil a 1500, los tiempos de compilación triple
Después de hacer una DLL es en realidad tiró por encima de efecto ya es evidente, más margen de mejora, la optimización se puede configurar (véase el uso de documentos oficiales):
más concisa
chunksAll
en mimimizer Sourcemap
fin
Este artículo presenta algunas herramientas probablemente fondo Evolución, estructura organizativa y personalizados configuraciones básicas, y cómo hacer las herramientas de análisis para optimizar el rendimiento, muchos pequeños detalles hay manera de once mencionado, tal como hemos visto trozo cargada es el valor hash del tiempo, ¿cómo podemos discernir lo que los componentes: la solución es hacerlo a través de la configuración de enrutamiento moduleName en:
() => import(/* webpackChunkName: "chunkNameDisplay" */'../containers/UserList/chunkNameDisplay')Como, muy amplia. Después con las versiones 5.x webpack siendo liberados y muchos equipos utilizan, tal vez un montón de cosas y no habrá un gran cambio. Y varios marcos de integración se ha convertido cada vez más diversa, más manos en la liberación de los programadores de la ingeniería de mantenimiento, que se centran en la evolución del proyecto, echar un vistazo a la webpack ecológica nos traerá qué tipo de sorpresas.
【Final】
"Plan de Trabajo [el segundo trimestre] - la capacidad de aprendizaje Challenge" comenzó!
A partir de ahora hasta el 21 de marzo debe fluir para apoyar el autor original, la exclusiva [más] medalla esperando a que reto
lectura recomendada
☞ 14nm interno saludar al amanecer, los Países Bajos importada sin problemas en la fábrica de máquinas de litografía!
☞ Ali Huawei Baidu tres pilares, las altas tarifas 5G, el sistema operativo Linux es el rey | china cosas reales informe de estado desarrollador
☞ aumento anual de 1,29 mil millones de líneas de código para completar las necesidades diarias de casi 4.000, programador fábrica de ganso Secreto dio la noticia!
☞ Cómo decir adiós y liebres son nulas? Gran Dios resultó estar haciendo!
Nos fijamos en cada punto, en serio como favorito
