script - webpack wikipedia

¿Cómo configurar el paquete web 4 para evitar que los trozos de la lista de puntos de entrada aparezcan en cualquier otro paquete?

Question

Estoy trabajando en un proyecto grande y tratando de aterrizar el paquete web 3 -> 4 actualización. Esta aplicación tiene alrededor de 1.000 puntos de entrada, y aproximadamente 10 de ellos se consideran "globales" o "centrales" y se garantiza que están en todas las páginas. Estos paquetes principales contienen una combinación de código de proveedor y no proveedor. Necesito configurar el paquete web para compilar todos estos activos para que los fragmentos que aparezcan en cualquiera de estos paquetes no aparezcan en ningún otro paquete, independientemente del tamaño del fragmento, sin crear nuevos activos que deban agregarse a la página.

Con el paquete web 3, hemos estado usando CommonsChunkPlugin para lograr esto. Aquí hay un ejemplo simple:

new webpack.optimize.CommonsChunkPlugin({
  name: ''a-global-bundle'',
  minChunks: Infinity,
}),

Ahora, con el paquete web 4 y la eliminación de CommonsChunkPlugin, no tengo claro cómo lograr este tipo de optimización.

Me gustaría poder darle al paquete web una lista de puntos de entrada y cualquier fragmento que aparezca en cualquiera de ellos no aparecerá en ningún otro paquete, pero no estoy seguro de cómo hacerlo. He leído algunos documentos próximos sobre splitChunks pero no he podido encontrar una solución.

He configurado un pequeño repositorio como punto de partida para jugar con: https://github.com/lencioni/webpack-splitchunks-playground

Una dirección interesante que estoy probando es configurar cacheGroups con un grupo para cada uno de estos puntos de entrada e implementar la opción de test con una función que realice esta comprobación. Sin embargo, la documentación es bastante escasa, por lo que no estoy realmente seguro de cuál sería la forma correcta de escribir esta función de prueba o incluso si esto funcionaría.

Answer 1

Nuestro objetivo es configurar el paquete web para construir nuestros activos de modo que los fragmentos que aparecen en cualquiera de estos paquetes no aparezcan en ningún otro paquete.

Lo que tenía antes:

            new webpack.optimize.CommonsChunkPlugin({
                name: ''vendor'',
                minChunks: function (module, count) {
                    // this assumes your vendor imports exist in the node_modules directory and module should be required
                    // in at least 3 entries before it moved to common chunk
                    return (module.context && module.context.indexOf(''node_modules'') !== -1) && count > 2;
                }
            }),

Cómo funciona ahora:

        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[///]node_modules[///]/,
                        chunks: ''all'',
                        name: ''vendor'',
                        enforce: true,
                        minChunks: 3
                    }
                }
            }
        },

Answer 2

Ok, entonces creo que he descubierto cómo hacer esto. Pero primero, así es como se ve la compilación con la configuración predeterminada de splitChunks (nota FOO.bundle.js es un paquete asíncrono creado por una importación dinámica):

            Asset       Size  Chunks                    Chunk Names
   core.bundle.js    605 KiB       0  [emitted]  [big]  core
  coreB.bundle.js    791 KiB       1  [emitted]  [big]  coreB
  coreC.bundle.js    791 KiB       2  [emitted]  [big]  coreC
      a.bundle.js    748 KiB       3  [emitted]  [big]  a
      b.bundle.js    792 KiB       4  [emitted]  [big]  b
      c.bundle.js    674 KiB       5  [emitted]  [big]  c
    FOO.bundle.js  709 bytes       6  [emitted]         FOO
runtime.bundle.js   7.49 KiB       7  [emitted]         runtime

Si el objetivo es hacerlo para que los módulos que aparecen en core, coreB y coreC no aparezcan en ningún otro paquete, esto se puede hacer con la siguiente configuración:

function coreBundleCacheGroups(coreBundles) {
  const cacheGroups = {};
  const coreChunkNames = Object.keys(coreBundles);
  const coreChunkNamesSet = new Set(coreChunkNames);


  coreChunkNames.forEach((name) => {
    cacheGroups[name] = {
      name,
      chunks: ''all'',
      minSize: 0,
      minChunks: 1,
      reuseExistingChunk: true,
      priority: 10000,
      enforce: true,
      test(module, chunks) {
        if (module.depth === 0) {
          return false;
        }

        // Find first core chunk name that matches
        const partOfGlobalChunks = chunks.filter(chunk => coreChunkNamesSet.has(chunk.name));

        if (!partOfGlobalChunks.length) {
          return false;
        }

        const partOfGlobalChunksSet = new Set(partOfGlobalChunks.map(chunk => chunk.name));
        const firstCoreChunkName = coreChunkNames.find(name => partOfGlobalChunksSet.has(name));
        return firstCoreChunkName === name;
      },
    };
  });

  return cacheGroups;
}

const coreBundles = {
  core: ''./src/bundles/core.js'',
  coreB: ''./src/bundles/core-b.js'',
  coreC: ''./src/bundles/core-c.js'',
};

module.exports = {
  mode: ''none'',

  entry: {
    ...coreBundles,
    a: ''./src/bundles/a.js'',
    b: ''./src/bundles/b.js'',
    c: ''./src/bundles/c.js'',
  },

  output: {
    filename: ''[name].bundle.js'',
    path: path.resolve(__dirname, ''dist'')
  },

  optimization: {
    runtimeChunk: ''single'',

    splitChunks: {
      cacheGroups: {
        ...coreBundleCacheGroups(coreBundles),
      },
    },
  },
};

que produce el siguiente resultado:

            Asset       Size  Chunks                    Chunk Names
   core.bundle.js    605 KiB       0  [emitted]  [big]  core
  coreB.bundle.js    188 KiB       1  [emitted]         coreB
  coreC.bundle.js    1.5 KiB       2  [emitted]         coreC
      a.bundle.js   76.4 KiB       3  [emitted]         a
      b.bundle.js   2.28 KiB       4  [emitted]         b
      c.bundle.js   1.91 KiB       5  [emitted]         c
    FOO.bundle.js  622 bytes       6  [emitted]         FOO
runtime.bundle.js   7.49 KiB       7  [emitted]         runtime

Answer 3

Su configuración actual (usando Webpack 3) usa CommonsChunkPlugin para una porción de proveedor explícito :

Divide tu código en proveedor y aplicación.

Comprobando el resultado del paquete web para su https://github.com/lencioni/webpack-splitchunks-playground , encontré que a.bundle.js contiene el siguiente código:

// `react`, `react-dom` plus
console.log(''core module'');     // from core-module.js
console.log(''core module b'');   // from core-module-b.js
console.log(''non-core module''); // from non-core-module.js

Un código similar está dentro de b.bundle.js (la diferencia en este script es el último console.log que se hace referencia desde non-core-module-b.js : non-core-module-b.js console.log(''non-core module b''); ).

Actualizando la opción de optimización webpack.config.js para:

optimization: {
    runtimeChunk: ''single'',

    splitChunks: {
        chunks: ''all'',

        cacheGroups: {
            default: {
                enforce: true,
                priority: 1
            },
            vendors: {
                test: /[///]node_modules[///]/,
                priority: 2,
                name: ''vendors'',
                enforce: true,
                chunks: ''all''
            }
        }
    }
}

Producir un código de no duplicación entre los paquetes.

Puedes consultar el código de trabajo here . También he creado una solicitud de extracción para su proyecto de muestra.

Más información sobre la división de código y la optimización de splitChunks