proyecto - crear componente angular 6

Cómo realizar la sincronización de paquetes a través de CLI JSON angular e información CLI JSON angular

Question

Dos preguntas Angular 2 angular-cli.json aquí:

1. después de ejecutar ''ng build --prod'' puedo ingresar a mi archivo index.html en la carpeta dist recién creada y agregar el atributo ''asíncrono'' a las etiquetas de script incluidas para evitar que se bloqueen. Esto ayuda con la velocidad del sitio web, pero esporádicamente bloquea el sitio. ¿hay una opción en el ángulo-cli.json que agregaría esto para mí durante la construcción de una manera mejor?

Corrí mi sitio a través de la prueba de Google, mi sitio web, y lo único que me queda por arreglar es eliminar el JavaScript y el CSS que bloquean la reproducción en el contenido de la mitad superior de la página.

A continuación se muestra el resultado más específico que obtengo de https://developers.google.com/speed/pagespeed/insights/

Elimine el bloqueo de procesamiento de JavaScript y CSS en el contenido de la mitad superior de la página

Tu página tiene 4 recursos de script de bloqueo y 1 recursos de CSS de bloqueo. Esto provoca un retraso en la reproducción de su página. Ninguno de los contenidos en la parte superior de la página se puede procesar sin esperar a que se carguen los siguientes recursos. Intente diferir o cargar de forma asíncrona los recursos de bloqueo, o inserte las partes críticas de esos recursos directamente en el HTML. Eliminar el JavaScript que bloquea la reproducción:

*****. com / inline.e93ce34d30ab58073e62.bundle.js *****. com / scripts.68b893062974958fa7b3.bundle.js *****. com / vendor.4f05ee5669648be9602e.bundle.js ***** .com / main.2d50b916b073e7fba148.bundle.js Optimizar la entrega de CSS de lo siguiente: *****. com / styles.c9d2a891e3814f5a5ff6.bundle.css

2. ¿Dónde hay un recurso para explicar cada detalle de cómo funciona angular-cli.json? Estoy teniendo problemas para encontrar buena información al respecto.

Answer 1

Puede lograr esto ''expulsando'' su aplicación y utilizando HTML WEBPACK PLUGIN y su complemento de extensión script-ext-html-webpack-plugin :

1. ejecutar ng eject -prod . Este comando expondrá el archivo webpack.config.js en su directorio raíz. (para ''unject'' su aplicación ver otra vez mi otra respuesta )

2. Ejecute npm install para instalar cargadores de paquetes web.

3. Instala dos nuevos complementos:

   npm i html-webpack-plugin script-ext-html-webpack-plugin -D

4. En su archivo webpack.config.js , edite la entrada del complemento de edición y agregue dos complementos en este orden:

   plugins: [
     new HtmlWebpackPlugin(),
     new ScriptExtHtmlWebpackPlugin({
       defaultAttribute: ''async''
     })
   ]  

   source

5. ejecutar npm run build ya que ng build ya no funciona en aplicaciones expulsadas. Después de ejecutar el comando anterior, debe obtener todos los scripts establecidos en async dentro del directorio dist .