Los dos primeros artículos, explicados principalmente configuración webpack, pero a medida que más y más proyectos, la construcción de la velocidad puede ser más lento y más lento, construido a partir de JS volumen también está creciendo, entonces usted necesita para webpack optimización de la configuración.
Este juego de papel a cabo de una manera optimizada docena, podemos combinar su propio proyecto, seleccionar la forma más adecuada para optimizar. El plug-ins fuente webpack que en su mayoría no lo leyó, principalmente una combinación de documentos oficiales webpack y prácticas del proyecto, y pasó mucho tiempo después de verificar la salida de este artículo, si hay texto en el lugar equivocado, por favor me corrija en el área de comentarios.
Dada la tecnología de cambio rápido de front-end, recurrieron a este artículo basado en el número de versión de webpack:
├── [email protected]
└── [email protected]
copiar el código en este artículo direcciones artículo correspondiente (con el momento de escribir esto) para referencia : github.com/YvetteLau/w ...
Cuantificar
A veces, pensamos en la optimización es la optimización de la negativa, entonces, si hay un indicadores cuantificables antes y después de la comparación se puede ver, sería mejor cosa.
plug-ins y el cargador de tiempo respectivo de medición gastado, después de su uso, cuando sea construido, esta información será similar a la siguiente plugin de velocidad-medida-webpack-:
Información antes y después de la comparación, para determinar los resultados óptimos.
utilizando la velocidad medida-webpack-plugin es simple, se puede utilizar directamente para envolver configuración webpack:
//webpack.config.js
const = SpeedMeasurePlugin la require ( "velocidad-medida-webpack-plugin");
const = nuevo nuevo SMP SpeedMeasurePlugin ();
config = const {
// ... webpack dispuestos
}
module.exports = smp.wrap (config);
Copia el código 1.exclude / include
lo posible para garantizar que el menor número de documentos traducidos por excluyen, incluye la configuración. Como su nombre indica, excluir el archivo especificado para excluir, incluir el archivo especificado para incluir.
excluir una prioridad más alta que incluyen, usar rutas absolutas en la matriz para incluir y excluir, tratar de evitar excluir prefieren usar incluyen.
//webpack.config.js
const = ruta del require ( 'path');
module.exports = {
// ...
Módulo 1: {
las reglas: [
{
Prueba: /.js[x]?$/,
uso: [ 'babel- Cargador '],
incluir: [path.resolve (__ dirname, la src ')]
}
]
},
}
copiar la figura código no está configurado incluyo la construcción y la configuración de la comparación los resultados incluyen:
-
cache-loader
add-loader caché antes de que un gran número de cargador sobrecarga de rendimiento, el disco caché de resultados. En el directorio de almacenamiento predeterminada node_modueles / .cache / cache-loader.
Primera instalación depende de:
NPM la instalación -D-loader caché
copiar la configuración de la caché-loader código es muy simple, puede ser colocado antes que el otro cargador. configuración webpack modificado es como sigue:
module.exports = {
// ...Módulo: {
// mi proyecto, babel-loader lleva más tiempo, así que le di para configurar lascache-loader
reglas: [
{
Test: /.jsx?$/,
uso: [ 'Cache-Loader', 'Babel-Loader ']
}
]
}
}
copiar el código si eres como yo, sólo va a la caché de configuración babel-loader, no puede utilizar la caché-loader, para aumentar babel-loader opción CACHEDIRECTORY.
CACHEDIRECTORY: El valor predeterminado es falso. Cuando se establece, el directorio especificado se utiliza para almacenar en caché los resultados de la cargadora. Webpack construyó más tarde, intentará leer la memoria caché para evitar cada ejecución, pueda surgir, Babel recompilar el proceso de consumo de alto rendimiento. O un conjunto nulo si es cierto, usar el directorio de caché por defecto: node_modules / .cache / babel-loader . Open Babel-loader configuración de memoria caché y caché-loader, que compararon la próxima, el tiempo es muy cerca del edificio.
3.happypack
Debido a un gran número de archivos necesita para analizar y procesar, construir una lectura de archivos y escribir y el funcionamiento informático intensivo, sobre todo cuando el número de archivos aumenta, la construcción webpack se convertirá en un problema grave de lento. alfabetización de documentos y operaciones de cálculo no se pueden evitar, no se puede permitir webpack mismo tiempo para manejar múltiples tareas, equipo juego de poder de CPU multi-núcleo para mejorar la velocidad de acumulación?
Happypack puede hacer webpack lo hacen para dividir las tareas de proceso hijo simultánea múltiple para ejecutar el proceso hijo ha sido tratado y luego enviar los resultados al proceso primario.
En primer lugar es necesario instalar Happypack:
NPM la instalación Happypack -D
copiar el código para modificar el fichero de configuración:
const = Happypack las funciones require ( 'Happypack');
module.exports = {
// ...
MODULE1: {
las reglas: [
{
Prueba: /.js[x]?El error de análisis Katex: Después de que el grupo esperaba '_' en 90 posición: ... [path.resolve (__dirname, 'el origen' ... /,
uso: '? Happypack / cargador ID = CSS',
la incluyen: [
path.resolve (__ nombredir, ' la src '),
path.resolve (__ dirname,' los node_modules', 'en Bootstrap', 'dist')
]
}
]
},
plugins: [
nuevo nuevo Happypack ({
ID: 'JS', // y la regla correspondientes a ID = js
// regla previamente en este cargador de configuración en
uso: [ 'babel-loader' ] // debe ser una matriz
}),
nueva nuevo Happypack ({
ID: 'CSS', // y el ID de regla = css correspondiente al
uso: [ 'estilo-Loader', 'CSS-Loader', 'postcss-Loader'],
})
]
}
copiar el valor por defecto de código Happypack en un número de núcleos de CPU - 1 proceso, por supuesto, podemos pasar a las roscas Happypack.
Descripción: Cuando la configuración postcss-loader en Happypack debe crearse postcss.config.js en el proyecto.
//postcss.config.js
module.exports = {
plugins: [
El require ( 'autoprefixer') ()
]
}
Copia el código que de otro modo genera un error: Error: No se encontró PostCSS Config
Además, cuando el proyecto no es muy complicado cuando no es necesario que configure Happypack, debido a que el proceso de asignación y gestión lleva tiempo, y no puede mejorar con eficacia la construcción de velocidad, incluso más lento.
4.thread-loader
Además de utilizar Happypack, también puede utilizar la rosca-loader, el hilo-loader colocado antes que el otro loader, a continuación, el cargador colocada tras loader estará en una operación separada de la piscina trabajador.
Cargador de correr en la piscina del trabajador (trabajador de la piscina) es limitada. Por ejemplo:
El cargador no puede crear nuevos archivos.
El cargador no puede utilizar un API loader personalizado (es decir, a través de plug-ins).
El cargador no puede obtener la opción de establecer webpack.
Primera instalación depende de:
NPM la instalación de rosca -D-Loader
copiar el código para modificar la configuración:
module.exports = {
Module1: {
// I del proyecto, babel-loader lleva más tiempo, por lo que se configura para I-cargador Rosca
las reglas: [
{
la prueba:? /.jsx Katex el error de análisis: el esperado 'EOF', GOT '}' posición en 87: ... ']}] ... /, / ahora $ /)
]
}
copiar el código cuando está en uso, si es necesario idioma especificado, entonces tenemos que el paquete de idioma se introduce manualmente, por ejemplo, la introducción del paquete de idioma chino:
Importar de Momento 'Moment';
Importar 'Momento / la configuración regional / ZH-CN'; // introduce manualmente
copiar el código introducido hace index.js momento, de tamaño el envase bundle.js de 263KB, si la configuración IgnorePlugin, introducido por separado momento / locale / zh-cn, construido a partir del tamaño del paquete de 55KB.
10.externals
nos movemos un poco de JS archivos almacenados en el CDN (disminución webpack abarrotado js volumen), por el index.html
= {module.exports
entrada: {
REACT: [ 'reaccionar', 'DOM-REACT']
},
MODO: 'Producción',
la salida: {
nombre de archivo: '[nombre] .dll [el hash :. 6] Js',
ruta: path.resolve (__ nombredir, 'dist', 'DLL'),
Biblioteca: '[nombre] _DLL' expuesta al exterior a través de la //
// libraryTarget especificar cómo se expone el contenido, es por defecto var
},
plugins: [
nuevo nuevo webpack.DllPlugin ({
// nombre y la misma biblioteca
nombre: '[nombre] _DLL',
ruta: path.resolve (__ dirname, 'dist', 'DLL', 'la manifest.json') de generación de //manifest.json camino
})
]
}
copia del código en aumento package.json los guiones:
{
"guiones": {
"dev": "Desarrollo NODE_ENV = webpack-dev-Server",
"construir": "la producción webpack NODE_ENV =",
"Construir: DLL": "webpack --config webpack.config.dll.js"
},
}
copiar la ejecución de código NGP plazo de construcción: de todo, se puede ver el directorio dist como la razón de la biblioteca de vínculos dinámicos DLL colocado bajo un directorio independiente , principalmente con el fin de utilizar CleanWebpackPlugin filtrar más fácilmente la biblioteca de vínculos dinámicos.
dist
└── DLL
├── manifest.json
└── react.dll.9dcd9d.js
copiar el código para dejar manifest.json DLLReferencePlugin mapeado en sus dependencias.
Webpack modifica el archivo de configuración principal: webpack.config.js configuración:
//webpack.config.js
const = webpack la require ( 'webpack');
const = ruta del require ( 'camino');
module.exports = {
// ...
devserver: {
contentbase: path.resolve (__ dirname, 'dist')
},
plugins: [
nuevo nuevo webpack.DllReferencePlugin ({
el manifiesto: path.resolve (__ dirname, 'dist', 'DLL', 'la manifest.json')
}),
nueva nueva CleanWebpackPlugin ({
cleanOnceBeforeBuildPatterns: [ ' '! DLL / / *', '! DLL', '] // no elimina el directorio DLL
})
// ...
]
}
copiar el código usos NPM corren edificio estructura, se puede ver bundle.js volumen muy reducido.
Opinión pública / archivo index.html en el que los react.dll.js introducción
Copiar el código
a la velocidad de acumulación
el volumen de paquetes
12. código común desconexión
código común de desconexión para aplicaciones de múltiples páginas, si una pluralidad de páginas introduce algunas módulo común, que se puede sacar de estos módulos comunes, envasados por separado. código común sólo necesita descargar una vez que la memoria cache para evitar la duplicación de descarga.
Independiente y de varias páginas de código común debería haber ninguna diferencia en la configuración de una aplicación de una sola página, se configura en optimization.splitChunks en.
//webpack.config.js
module.exports = {
optimización: {
splitChunks: {// bloque de código de segmentación
cacheGroups: {
Vendedor: {
// Terceros dependiente de
prioridad: 1, // asigna la prioridad, primero a tercer módulo separan
nombre: 'vendedor',
de la prueba: / los node_modules /,
trozos: 'inicial',
el minSize: 0,
minChunks: 1 // menos 1 veces introdujeron
},
// grupo caché
común: {
// módulos comunes
trozos: 'inicial' ,
nombre: 'común',
la minSize: 100, // tamaño supera 100 bytes
minChunks: 3 // mínimo introdujo tres veces
}
}
}
}
}
Copia el código de incluso una sola aplicación página, puede utilizar esta misma configuración, por ejemplo, embalados fuera bundle.js demasiado grande, podemos confiar en alguna empaquetado en una librería de enlace dinámico, a continuación, arrancó el resto de la dependencia de terceros. Esto puede reducir efectivamente el tamaño del volumen de bundle.js. Por supuesto módulo pública, puede continuar para extraer el código de negocios aquí, porque mi código fuente del proyecto menos, así que no hay ninguna configuración.
runtimeChunk
runtimeChunk función es contener una lista de asignaciones de main.js trozo sacó, cuando se configura splitChunk, recuerde configuración runtimeChunk.
module.exports = {
// ...
Optimización: {
runtimeChunk: {
nombre: 'el manifiesto'
}
}
}
código del archivo de copia construcción final se generará fuera de un manifest.js.
Con una mayor optimización webpack-haz-analizador de
hacer webpack construir un tiempo optimizado, proveedor superó a más de 1M, reaccionar y reaccionar-dom ha sido parcelada en una DLL.
De ahí la necesidad de webpack-haz-analizador de paquetes que parecen de mayor volumen.
Primera instalación depende de:
NPM-webpack al instalar el paquete -D-Analizador de
copiar el código es también muy simple, modificamos la configuración:
//webpack.config.prod.js
const = BundleAnalyzerPlugin la require ( 'el paquete-webpack analizador') BundleAnalyzerPlugin. ;
const = fusionar los require ( 'webpack-Merge');
el requerir baseWebpackConfig = const ( './ webpack.config.base');
module.exports = Combinar (baseWebpackConfig, {
// ...
plugins: [
// ...
nueva nueva BundleAnalyzerPlugin (),
]
})
Copia el código NGP plazo de construcción constructo, se por defecto: http://127.0.0.1:8888/, puede verse el volumen de cada paquete:
Además división del proveedor, la división proveedor en cuatro (splitChunks utilizado para split).
= {module.exports
de optimización: {
concatenateModules: false,
splitChunks: {// código de bloque de segmentación
maxInitialRequests:. 6, // por defecto 5
cacheGroups: {
Vendedor: {
// Terceros dependiente
prioridad :. 1,
nombre: 'vendedor',
prueba: / los node_modules /,
de trozos son: 'inicial',
el minSize: 100,
minChunks: Presentación repiten varias veces 1 //.
},
'web-Lottie': {
nombre: "Lottie-web", // reaccionar-lottie separado desembalaje
prioridad: 5, // debe ser mayor que el peso vendor
de la prueba: / [/] los node_modules [/] web-Lottie [/] /,
de trozos son: 'inicial',
el minSize: 100,
minChunks:. introducir repiten varias veces 1 //
} ,
// ...
}
}
}
}
Copia el código reconstruida, los resultados son los siguientes:
13.webpack propia optimizado
árbol temblar
si utiliza la sintaxis de importación ES6, a continuación, en un entorno de producción, se eliminará automáticamente sin el uso del código.
//math.js
Const el Add = (A, B) => {
el console.log ( 'AAAAAA')
volver A + B;
}
menos const = (a, b) => {
console.log ( 'bbbbbb')
volver a - b;
}
{Exportación
de Agregar,
menos
}
copiar el código //index.js
importación {Add, menos de} './math';
el Add (2,3);
código de copias finales del año, menos funciones no será embalado en ella.
para mejorar el alcance de alojamiento alcance
aumento de las variables, se puede reducir el número de declaraciones de variables. En un entorno de producción, activado por defecto.
Además, tomamos nota de la hora de la prueba, la velocidad medida de webpack-plugin y HotModuleReplacementPlugin no se pueden utilizar, de lo contrario será error:
configuración de optimización babel
Si usted no está familiarizado con Babel, a continuación, se puede leer este artículo: no se puede perder el conocimiento Babel7.
Cuando no se eliminan @ babel / plugin, transformación y tiempo de ejecución , babel utiliza función auxiliar pequeño para lograr una _createClass parecidas otros métodos públicos. Por defecto, se le inyectará (Inyectar) se necesite en cada archivo. Sin embargo, este resultado era los JS construidas de tamaño más grande.
Asimismo, no se necesita inyectarse cada js funciones auxiliares, por lo que podemos utilizar @ babel / plugin, transformación y tiempo de ejecución , @ babel / plugin-transformar-tiempo de ejecución es un ayudante de inyección reutilizable Babel para guardar el tamaño del código plug-ins.
Por lo tanto, podemos aumentar @ babel plug-in, transformación y tiempo de ejecución de configuración / en .babelrc en.
{
"The Presets": [],
"plugins": [
[
"@ babel / plugin-Transform-Runtime"
]
]
}
copiar el código anterior es lo que uso hasta la fecha de alguna optimización, si usted tiene una mejor forma de optimizar, bienvenido en la sección de comentarios comentarios, gracias por leer.
