Cómo resolver el problema de que los archivos empaquetados del paquete web son demasiado grandes
Cuando comencé a usar webpack, usé el mismo archivo de configuración de webpack en entornos de desarrollo y producción, lo que resultó en un montón de complementos innecesarios como HotModuleReplacementPlugin, NoErrorsPlugin, etc. ... En este punto, no importa qué método de optimización se utilice, el efecto no será demasiado grande. Por lo tanto, si el archivo que empaqueta es muy 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
lt;script src="/build/vendor.js"gt;lt;/scriptgt;
lt;script src="/build/ bundle.js"gt;lt;/scriptgt;
Además del archivo proveedor.js, también podemos agregar un nuevo archivo proveedor.js.
Además de este método, también se pueden introducir bibliotecas de terceros haciendo referencia a archivos externos, como la siguiente configuración
{
externals: {
'react': 'React'
}
}
La clave del objeto externo se utiliza para require. La clave se usa para require, como require('react'), y el valor del objeto representa cómo acceder al objeto globalmente (window.React en este caso). index.html se ve así
lt;script src="//cdn.bootcss.com/react/0.14.7/react.min.js"gt;lt;/scriptgt;
p>lt;scriptrc="/build/bundle.js"gt;lt;/scriptgt;
Por supuesto, recomiendo 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, 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 de React Router, 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 que utiliza 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)< / p>
bundler.run((err, stats) =gt; {
let activos = stats.toJson().assets
let nombre
for (let i = 0; i lt; activos.longitud; i ) {
if (activos[i].nombre.startsWith('principal')){
nombre = activos[i].nombre
break
}
}
fs.stat(config.buildTemplatePath , (err, estadísticas) =gt; {
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.