Duplicate CSS files while flushing #64

swernerx · 2018-07-23T14:20:47Z

I am migrating a project to use flush chunks. Unfortunately I see duplicate entries for my main CSS assets being generated:

import flushChunks from 'webpack-flush-chunks'
const chunks = flushChunks(clientStats, {
    // TODO: This part should be dynamic later on based on the#
    // chunks which were rendered with the render call just before.
    chunkNames: [ "main" ]
})

When using

return `<head>
  <meta charset="utf-8">
  ${helmet.title.toString()}
  ${helmet.meta.toString()}
  ${helmet.link.toString()}
  ${chunks.styles.toString()}
</head>`

I see the following style rules being added to the head:

<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">
<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">
<link rel="stylesheet" href="/static/chunk-vendor-eeuzoICW.css">

This is with Webpack v4, a single "entry", and split chunks instructions for vendor and runtime:

    return {
        mode: isDev ? "development" : "production",
        stats: "minimal",

        entry: [
            resolve("src/@browser/index.js")
        ],

        // You may want 'eval' (in dev) instead if you prefer to see the compiled output in DevTools.
        // See the discussion in https://github.com/facebook/create-react-app/issues/343
        devtool: isDev ? "cheap-module-source-map" : "source-map",

        output: {
            path: resolve(distDirectory),
            publicPath: '/static/',
            hashFunction: Hasher,
            hashDigest: "base52", // A-Za-z
            hashDigestLength: 8,
            filename: isDev ? "bundle-[name].js" : "bundle-[name]-[chunkhash].js",
            chunkFilename: isDev ? "chunk-[name].js" : "chunk-[name]-[chunkhash].js",
            crossOriginLoading: "anonymous"
        },

        optimization: {
            minimize: !isDev,
            runtimeChunk: true,
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendor',
                        chunks: 'all'
                    }
                }
            },
        ....

dashukin · 2018-09-28T08:17:29Z

@faceyspacey, @ScriptedAlchemy , it seems to be the same issue like the one mentioned in #61

Initial fix for #61 includes takes into consideration first argument passed to _createApiWithCss2, while the second one keeps possibly duplicated.

I was able to replicate the issue on next setup:

    "babel-plugin-universal-import": "^3.0.3",
    "react-universal-component": "^3.0.3",
    "webpack-flush-chunks": "^2.0.1",
    "extract-css-chunks-webpack-plugin": "^3.0.11",

with stats file generated with

    "webpack-stats-plugin": "^0.2.1",

  optimization: {
    splitChunks: {
      chunks: 'async', // async, initial, all
      minSize: 30000,
      minChunks: 1,
      maxInitialRequests: 5,
      maxAsyncRequests: 3,
      automaticNameDelimiter: CHUNKS_NAME_DELIMITER,
      name: false,
      cacheGroups: {
        app: {
          test: /[\\/]@app-common[\\/]/,
          name: 'app',
        },
        cells: {
          test: /[\\/]@cells[\\/]/,
          name: 'cells',
        },
        common: {
          test: /[\\/]@common[\\/]/,
          name: 'common',
        },
        utils: {
          test: /[\\/]@utils[\\/]/,
          name: 'utils',
        },
        vendors: {
          test: /[\\/]@node_modules[\\/]/,
          name: 'vendor',
          priority: -20,
        }
      },
    },
  },

Quick check with adding isUnique call for second argument passed to _createApiWithCss2 in compiled code seems to solve the issue.

// node_modules/webpack-flush-chunks/dist/flushChunks.js:25

  return (0, _createApiWithCss2.default)([].concat(_toConsumableArray(jsBefore), _toConsumableArray(files), _toConsumableArray(jsAfter)).filter(isUnique), [].concat(_toConsumableArray(jsBefore), _toConsumableArray(jsAfter.reverse()), _toConsumableArray(files)).filter(isUnique), stats, opts.outputPath);

before adding:

<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/main.ccfbbfe1ef5f990ca905.css' />
<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/chunks/app.0686eedf7cedb804bc00.css' />
<link rel='stylesheet' href='/css/chunks/common.90e728aa3054798fe428.css' />
<link rel='stylesheet' href='/css/chunks/landing.container.c5b76b8c18b56e0d3d70.css' />

and after adding:

<link rel='stylesheet' href='/css/chunks/common.28157dcd2e468c7f4494.css' />
<link rel='stylesheet' href='/css/chunks/app.3bc735b9f7b1db77a218.css' />
<link rel='stylesheet' href='/css/main.a032936feb332b73b7a6.css' />
<link rel='stylesheet' href='/css/chunks/landing.container.c5b76b8c18b56e0d3d70.css' />

GH-73

dashukin · 2018-10-01T19:58:02Z

@swernerx, GH-73 was merged into 2.0.2 version, could you double check from your side if issue has been fixed?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Duplicate CSS files while flushing #64

Duplicate CSS files while flushing #64

swernerx commented Jul 23, 2018

dashukin commented Sep 28, 2018 •

edited

Loading

dashukin commented Oct 1, 2018

Duplicate CSS files while flushing #64

Duplicate CSS files while flushing #64

Comments

swernerx commented Jul 23, 2018

dashukin commented Sep 28, 2018 • edited Loading

dashukin commented Oct 1, 2018

dashukin commented Sep 28, 2018 •

edited

Loading