Cómo optimizar el paquete web

一、Webpack性能优化
          1、可以减少webpack打包时间
                    2、可以减少webpack打出来包体积
            优化loader 对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel

El código se convertirá en una cadena para generar un AST, y luego continuará transformando el AST y finalmente generará un nuevo
código. Cuanto más grande sea el proyecto, más códigos de conversión, menor será la eficiencia. Por supuesto, tenemos una forma de
optimizar el rango de búsqueda de archivos de Loader

        module.exports = {

module: {
rules: [
{
// archivos js solo usan babel
test: /.js$/,
loader: 'babel-loader',
// solo busca en la carpeta src
incluye: [resolve ('src')],
// La ruta que no se buscará
excluye: / node_modules /
}
]
}

Por supuesto, esto no es suficiente. También podemos almacenar en caché los archivos compilados por Babel. La próxima vez solo necesitamos compilar los
archivos de código cambiados . Esto puede acelerar enormemente el tiempo de empaquetado.
2. HappyPack está
limitado a Node ejecutándose en un solo hilo. , por lo que Webpack también está empaquetado en un proceso de un solo subproceso
, especialmente en la implementación Loader, la compilación prolongada de muchas tareas, como esta, conducirá a
la situación en la que se encontrará. HappyPack puede sincronizarse para realizar la conversión Loader en paralelo, de modo que podamos aprovechar los
recursos del sistema del sistema para acelerar la eficiencia de empaquetado
como
Module1: {
loaders to: [
{
Test: /.js$/,
the include: [Resolve ('the src') ],
exclude: / node_modules /,
// El contenido después de id corresponde al siguiente
cargador: 'happypack / loader? id = happybabel'
}
]},
complementos: [
new HappyPack ({
id: 'happybabel',
loaders: ['babel- loader? cacheDirectory '],
// abrir 4 hilos
hilos: 4
})
]
etc.