Cómo resolver el problema de los archivos dist demasiado grandes después del empaquetado del paquete web
Cuando comencé a usar webpack por primera vez, usé el mismo archivo de configuración de webpack en el entorno de desarrollo y en el entorno de producción. Esto resultó en un montón de complementos innecesarios en los archivos JS empaquetados en el. Complementos del entorno de producción, como HotModuleReplacementPlugin, NoErrorsPlugin, etc. ... En este punto, no importa qué método de optimización se utilice, el efecto será pequeño. Entonces, si su archivo empaquetado es grande, primero verifique si contiene estos complementos.
Extraer bibliotecas de terceros
El código central de una biblioteca como React es de 627 KB, por lo que si la empaquetamos con el código fuente, el archivo será muy grande. Entonces puedes configurarlo en el paquete web
{
entrada: {
paquete: 'app'
proveedor: [' reaccionar' ]
}
complementos: {
nuevo webpack.optimize.CommonsChunkPlugin('vendor','vendor.js')
}
}
Esto creará un archivo proveedor.js adicional que debemos incluir antes de introducir nuestro propio código. Por ejemplo, en index.html
Por supuesto, recomiendo utilizar el primer método.
Compresión de código
Webpack viene con un complemento de compresión UglifyJsPlugin, que puede introducir en el archivo de configuración.
{
complementos: [
nuevo webpack.optimize.UglifyJsPlugin({
comprimir: {
advertencias: falso
}
})
]
.
}
Después de agregar este complemento, la velocidad de compilación se reducirá significativamente, por lo que generalmente solo está habilitado en entornos de producción.
Además, la compresión gzip se puede habilitar en el lado del servidor para optimizaciones aún más significativas.
División de Código
¿Qué es la división de código? Sabemos que cargar una página web generalmente carga todo el código js. Pero para una aplicación web, queremos cargar solo el código de la interfaz de usuario actual y no las partes en las que no se ha hecho clic.
Esto puede parecer mucho trabajo, pero con la división de código del paquete web y el enrutador de reacción, es fácil de lograr. Para ver un ejemplo de esto, consulte el ejemplo de la enorme aplicación oficial del enrutador React, y esto es lo que encontrará en la configuración anterior.
La división de código no es compatible con el sistema de módulos ES6, así que tenga cuidado al importar y exportar (especialmente al exportar). Si exporta un componente a la manera ES6, fallará sin errores, independientemente de si lo importa usando CommomJs o AMD.
Por supuesto, la razón por la que caí en este malentendido es porque acabo de comenzar a usar NodeJS y comencé a usar el estilo ES6. Además de esto, también es importante tener en cuenta que en el archivo de configuración del Webpack de producción, debe agregar publicPath
salida: {
ruta: xxx,
publicPath: yyy,
nombre de archivo: 'bundle.js'
}
publicPath: yyy,
nombre de archivo: 'bundle. js '
}
De lo contrario, el paquete web obtendrá la ruta incorrecta al cargar el fragmento.
Configurar caché
Antes de comenzar esta sección, consulte un artículo del maestro: Cómo desarrollar e implementar código front-end en una gran empresa.
Para archivos estáticos, si el contenido del archivo no ha cambiado desde que lo obtuvo por primera vez, el navegador leerá el archivo almacenado en caché directamente. ¿Qué pasa si el caché se configura durante demasiado tiempo y es necesario actualizar el archivo? Bueno, usar el MD5 del contenido del archivo como nombre del archivo es una buena solución. El siguiente es el método para usar el paquete web
Salida: {
ruta: xxx,
ruta pública: yyy,
nombre de archivo: ' [name ]-[chunkhash:6].js'
}
El nombre del archivo incluido con el valor hash agregado
const bundler = webpack(config)
bundler.run((err, stats) => {
let activos = stats.toJson().assets
let nombre
for (let i = 0; i < activos.longitud; i++) {
if (activos[i].nombre.startsWith('principal')){
nombre = activos [i].name
break
}
}
fs.stat(config.buildTemplatePath, (err, estadísticas) => {
if (err) {
fs.mkdirSync(config.buildTemplatePath)
}
writeTemplate( nombre)
})
})
Llame manualmente a la API del paquete web para obtener el nombre del archivo empaquetado y use writeTemplate para actualizar el código html. . Visite gitst para obtener el código completo.