Detener el uso de CSS en línea en Vue.js para el renderizado del lado del servidor.

24 Jul, 2023 Programación 0

Prefacio:

Referencia del cargador de estilo: https://github.com/webpack-contrib/style-loader#linktag

Según la documentación, style-loader permite que webpack renderice etiquetas para renderizar la información de estilo.

Problema principal:

Vue-style-loader es una versión bifurcada de style-loader (https://github.com/vuejs/vue-style-loader)

Estoy utilizando vue-style-loader en mi proceso de renderizado del lado del servidor. Funciona bien, sin embargo, renderiza toda la información CSS en línea en la etiqueta . Quiero utilizar etiquetas para no renderizar una gran cantidad de código en línea cuando se carga la página.

No vi nada relacionado con esto en los foros tampoco. Sin embargo, obtuve una referencia de aquí: https://github.com/webpack-contrib/style-loader/issues/461#issuecomment-739509879, donde afirman que style-loader no funciona en SSR. ¿Entonces eso significa que SSR siempre renderizará CSS en línea? ¿Hay alguna manera de usar un archivo CSS separado, fragmentado del código devuelto por SSR utilizando webpack?

Se agradece cualquier ayuda. Gracias.

EDITAR:

A continuación se muestran algunos de los paquetes utilizados con sus versiones:

"webpack": "^4.25.1", "vue-loader": "^15.4.2", "vue-ssr-webpack-plugin": "^3.0.0", "sass-loader": "^7.1.0", "css-loader": "^2.1.1",

Estoy utilizando la versión 1.12.2 de la aplicación de Vue storefront.

davy.ai

July 24, 2023 at 10:19 pm

Usando un archivo CSS separado fragmentado del código devuelto por SSR usando webpack

Es posible utilizar archivos CSS separados con renderizado en el lado del servidor usando webpack. Una forma de lograr esto es utilizando el complemento mini-css-extract-plugin junto con los complementos vue-server-renderer/client-plugin y vue-server-renderer/server-plugin.

Primero, debes instalar el complemento mini-css-extract-plugin:

npm install mini-css-extract-plugin --save-dev

Luego, actualiza la configuración de webpack para utilizar el complemento:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ... resto de tu configuración de webpack

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // solo habilitar la recarga en caliente en desarrollo
              hmr: process.env.NODE_ENV === "development",
              // si la recarga en caliente no funciona, este es un método forzoso
              reloadAll: true,
            },
          },
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    // ... tus otros complementos
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};

Ahora, cuando ejecutes la compilación, el complemento mini-css-extract-plugin generará archivos CSS separados para cada fragmento de tu compilación de webpack, y los complementos vue-server-renderer inyectarán automáticamente los archivos CSS correspondientes en tu HTML al renderizar tus componentes Vue.

const { createBundleRenderer } = require("vue-server-renderer");
const serverBundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");

const renderer = createBundleRenderer(serverBundle, {
  clientManifest,
  // ... tus otras opciones
});

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <link href="/main.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="/client.js"></script>
  </body>
</html>

Con estos cambios en la configuración de webpack, tu aplicación Vue renderizada en el lado del servidor ahora utilizará archivos CSS separados, lo que puede ayudar a reducir el tamaño de la página y mejorar el rendimiento.

Answer

davy.ai

July 24, 2023 at 10:19 pm
Usando un archivo CSS separado fragmentado del código devuelto por SSR usando webpack

Es posible utilizar archivos CSS separados con renderizado en el lado del servidor usando webpack. Una forma de lograr esto es utilizando el complemento mini-css-extract-plugin junto con los complementos vue-server-renderer/client-plugin y vue-server-renderer/server-plugin.

Primero, debes instalar el complemento mini-css-extract-plugin:
```
npm install mini-css-extract-plugin --save-dev
```
Luego, actualiza la configuración de webpack para utilizar el complemento:
```
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ... resto de tu configuración de webpack

  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // solo habilitar la recarga en caliente en desarrollo
              hmr: process.env.NODE_ENV === "development",
              // si la recarga en caliente no funciona, este es un método forzoso
              reloadAll: true,
            },
          },
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    // ... tus otros complementos
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};
```
Ahora, cuando ejecutes la compilación, el complemento mini-css-extract-plugin generará archivos CSS separados para cada fragmento de tu compilación de webpack, y los complementos vue-server-renderer inyectarán automáticamente los archivos CSS correspondientes en tu HTML al renderizar tus componentes Vue.
```
const { createBundleRenderer } = require("vue-server-renderer");
const serverBundle = require("./dist/vue-ssr-server-bundle.json");
const clientManifest = require("./dist/vue-ssr-client-manifest.json");

const renderer = createBundleRenderer(serverBundle, {
  clientManifest,
  // ... tus otras opciones
});
```
```
<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <link href="/main.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="/client.js"></script>
  </body>
</html>
```
Con estos cambios en la configuración de webpack, tu aplicación Vue renderizada en el lado del servidor ahora utilizará archivos CSS separados, lo que puede ayudar a reducir el tamaño de la página y mejorar el rendimiento.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Detener el uso de CSS en línea en Vue.js para el renderizado del lado del servidor.

Answer

davy.ai

Usando un archivo CSS separado fragmentado del código devuelto por SSR usando webpack