No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Vendorfiles en Webpack: generando el vendorfile

18/22
Recursos

Aportes 17

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渢rue鈥 en el 鈥渘ame鈥 de 鈥渟plitChunks鈥, solo acepta el de dentro de 鈥渃acheGroups鈥. Adem谩s, el 鈥渃hunks.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 鈥榲endor-[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 鈥渄ev鈥 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: 鈥渁ll鈥, 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));
          },
        },
      },
    },
  },