Que es la optimizacion
La última versión de webpack es la 5, pero ya en la 4, podemos optimizar los resultados del empaquetado eligiendo diferentes modos de modo, pero aún podemos usar la optimización para optimizar los resultados del empaque (optimización para entornos de producción)
minimizador
El atributo minimizador almacena una matriz, en la que se pueden almacenar los complementos utilizados para la compresión de código.
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require("terser-webpack-plugin");
optimization:{
minimizer:[
new TerserPlugin(),
new OptimizeCssAssetsWebpackPlugin()
]
},
Optimice-css-assets-webpack-plugin se usa para comprimir el código css del archivo de paquete empaquetado, y
terser-webpack-plugin se usa para comprimir el código js del archivo de paquete empaquetado.
Si esta propiedad está configurada en webpack , Entonces webpack pensará que el procesamiento de archivos empaquetados es personalizado, por lo que si solo se establece la compresión de css, entonces js no se comprimirá
splitChunks
Establecer este valor extraerá automáticamente todos los módulos públicos en un paquete separado
optimization: {
splitChunks: {
// 自动提取所有公共模块到单独 bundle
chunks: 'all'
}
},
En este caso se adoptó la estrategia de subcontratación y empaquetado, para decirlo sin rodeos, hay dos entradas de empaque.
entry: {
index: './src/index.js',
album: './src/album.js'
},
output: {
filename: '[name].bundle.js'
},
Después del empaquetado, se generarán dos conjuntos de archivos de empaquetado correspondientes, pero antes del empaquetado, estos dos conjuntos de archivos pueden hacer referencia al mismo módulo, por ejemplo, puede haber el mismo archivo de estilo o archivo de configuración, etc., entonces puede usar splitChunks para dividir estos públicos Los módulos se empaquetan en un archivo separado de la
siguiente manera: se extraen los módulos comunes y se completa el empaquetado
Temblor de árboles
Se utiliza para borrar la parte no citada del código, el nombre científico es código muerto
optimization:{
// 表示只导出那些外部使用了的那些成员
usedExports: true,
// 压缩模块
minimize:true
}
Fusionar módulo
En el resultado empaquetado, muchos módulos se colocan en una sola función. Si hay muchos módulos, el archivo de salida tendrá muchas de estas funciones de módulo.
optimization:{
// 合并模块
concatenateModules:true,
}
}
Esto pondrá todos los módulos en una sola función, concatenateModules será posible fusionar todos los módulos juntos y generar una función, las ventajas son: ambas para mejorar la eficiencia, pero también reduce el volumen de código que puede caber Si lo anterior Minimizar se usa junto, el volumen empaquetado será menor.
efecto secundario
Esta nueva característica nos permite identificar si nuestro código tiene efectos secundarios.
Cuando usamos treeShaking, podemos encontrar que aunque algunos módulos se introducen pero no se usan directamente, trssshaking no los eliminará, porque no importa cómo esté optimizado javascript internamente, la premisa es hacer que el programa se ejecute normalmente, pero algunos módulos sí importados aunque no se utilizan., Pero el exterior puede heredarlos, o tener algunos enlaces breves. Obviamente, no es apropiado eliminarlos precipitadamente. Luego, sideEffects puede marcar estos módulos y decirle a JavaScript que no tienen efectos secundarios y que se pueden eliminar, y que tienen efectos secundarios. Deshágase de
// 开启功能
optimization:{
sideEffects:true
}
Después de abrir, hará que javascript piense que no hay efectos secundarios.
Pero para algunas necesidades, algunos archivos pueden tener efectos secundarios, por lo que debe establecer qué archivos tienen efectos secundarios en package.json
Lo anterior es una introducción básica. Para funciones más detalladas, consulte la documentación oficial del paquete web. Si hay un error, por favor, déme un consejo.