Vendorfiles en Webpack: generando el vendorfile

Si quieren que su carpeta public se limpie cada vez que hagan un build, instalen npm i -D clean-webpack-plugin y agreguen la siguiente configuración a su webpack.config.js porque cada que hagan cambios y hagan un build, los archivos se generarán con un hash diferente, y con esto no tendrán archivos basura.

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// en la parte de los plugins
isDev
  ? () => {}
  : new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: path.resolve(__dirname, 'src/server/public')
  })

En la última actualización del webpack ya no permite un valor de “true” en el “name” de “splitChunks”, solo acepta el de dentro de “cacheGroups”. Además, el “chunks.some()” del return también genera un conflicto en esta versión. Pueden adaptar su código así:

splitChunks: {
      chunks: 'async',
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js',
          enforce: true,
          test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            return (chunk) => chunk.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
          },
        },
      },
    },

En el filename del vendor deben poner ‘vendor-[contentHash].js’ en lugar de solo [hash], de lo contrario siempre que se modifique el app.js también se va a crear un nombre distinto del vendor y perdemos toda la utilidad del cache

Agosto 2021. Tuve el problema que al refrescar la pagina en el localhost no cargaban los estilos. seguí la recomendacion del compañero Luis Fernando Mendez y se solucionó una parte. pero nada que cargaban los estilos. pero viendo el aporte de Laura Camila Pregonero se solucionó completamente. el codigo que me funcionó quedó así:

    splitChunks: {
      chunks: 'async',
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js',
          enforce: true,
          test (module, chunks){
            const name = module.nameForCondition && module.nameForCondition() /
            return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);  
          },
        },
      },
    },

En la ultima version se genera el css también con la clave vendors.css en el manifiest.json

Los que requieran hacer un deploy por ejemplo en Heroku deben pasar las siguientes dependencias de “dev” a las generales.

@babel/plugin-transform-runtime
@babel/core
@babel/preset-env
@babel/preset-react
asset-require-hook

Esto es por que iniciamos express desde el index y no desde server.

Al momento que tomo el curso la versión de Webpack es la 5.4.0 por lo que básicamente no funciona la configuración que manejan en la clase. Les recomiendo echarle un ojo a la documentación ya que hay que cambiar cosas importantes como por ejemplo al función para verificar los nombres.

Para los que tuvieron problemas con la funcion some, hacer lo siguiente:

test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            // console.log(typeof chunks);  //con esto podemos ver el tipo de dato de la variable, some funciona con arreglos y en este caso es un objeto
            //Probar cuando sean varios chunks con esto
            // return chunks.filter((chunk) => chunk.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name));
            return (chunks) => chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
          },

Para los que les aparece la pagina en blanco y el href del archivo de estilos como undefined, hacer lo siguiente:

// const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css'; //original
  const mainStyles = manifest ? manifest['vendors.css'] : 'assets/app.css'; //al parecer splitChunks genera un vendor para los css y lo mapea en el manifest con otro nombre

Webpack tiene una opcion de clean para el objeto de output sin tener que instalar el plugin de CleanWebpackPlugin https://webpack.js.org/configuration/output/#outputclean

En este momento, al setear como true la propiedad splitChunks.name, se me genera un error, pues se espera que contenta uno de 3 valores posibles:

• false
• Un string
• Una función
  Como no es ninguna de esas, no se generan los archivos, así que tuve que pasar la propiedad a string por ahora.

Verdorfile

Me perdí, para que era el vendor?

El parametro test de la configuración del cache group esta agregando todos los archivos incluyendo el código del app principal, esto hace que el archivo vendors contenga el código principal de la aplicación.

Por lo tanto pierde el objetivo de guardar en cache solo las dependencias de node_modules y cargar solamente el código de la app en las siguientes solicitudes si hay algún cambio.

Para agregar solo las dependencias al vendor se podría agregar solo la expresión regular de la siguiente manera:

test: /[\\/]node_modules[\\/]/,

Código final:

cacheGroups: {
  vendors: {
    name: 'vendors',
    chunks: 'all',
    reuseExistingChunk: true,
    priority: 1,
    filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js',
    enforce: true,
    test: /[\\/]node_modules[\\/]/,
  },
},

gracias por el aporte

Me gusto demasiado el archivo vendor, es realmente genial poder separar las dependencias de la logica de la app…

Con este objeto m aplicación no funciona bién, me genera un error
vendor: { chunks: “all”, reuseExistingChunk: true…

Para que no cambie el nombre del main.css a vendors.css en manifest.json utilice lo siguiente:

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      chunks: 'async',
      name: true,
      cacheGroups: {
        vendors: {
          name: 'vendors',
          chunks: 'all',
          reuseExistingChunk: true,
          priority: 1,
          filename: isDev ? 'assets/vendor.js' : 'assets/vendor-[contenthash].js',
          enforce: true,
          test(module, chunks) {
            const name = module.nameForCondition && module.nameForCondition();
            return chunks.some(chunk => chunk.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name));
          },
        },
      },
    },
  },