Next.js: how to avoid '.next/static/commons/main-xxxx.js' change???

[roytan883]

next: 6.0.1-canary.2
just change a little code in page, the yarn build .next/static/commons/main-xxxx.js always change. How to avoid it?
like this, modify some text in page/page2.js:

<div>Welcome to Page2 </div> to <div>Welcome to Page2 ABC </div>

the .next/static/commons/main-xxxx.js should not change when yarn build
but the main-6974e8617b50c9d0b1bf.js changed to main-515736f6b9f5ff2e32e1.js

Does anyone know how to keep generated main-xxxx.js not change when dependent library has no change?

I already try to rewrite the next.config.js only process node_modules file, but no luck:

const path = require('path')

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    for (plugin of config.plugins) {
      if (plugin['constructor']['name'] === 'CommonsChunkPlugin') {
        plugin.minChunks = function (module, count) {
          var needChunk = (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, './node_modules')
            ) === 0
          )
          if (needChunk) {
            console.log("needChunk = ", module.resource)
          }
          return needChunk
        }
        break;
      }
    }
    return config
  },
}

[timneutkens]

I'm not sure what you're asking. Please follow the issue template and provide a clear description of the issue you're having.

The fact that the chunk hash changes means there's something different in the chunk.

[roytan883]

@timneutkens

The fact that the chunk hash changes means there's something different in the chunk.

Do you know what .next/static/commons/main-xxxx.js design for?

Just follow this：

1, Populate ./pages/index.js inside your project:export default () => <div>Welcome to next.js!</div>
2, Run yarn build, look the folder .next/static/commons/
3, Change ./pages/index.js content :export default () => <div>Foo</div>
4, Run yarn build again, look the folder .next/static/commons/
5, Think, why there are two main-xxxx.js inside .next/static/commons/ ??? Is it correct？.next\dist\bundles\pages\index.js already re-compiled, Why the common main-xxxx.js still re-create?

[roytan883]

I guess the "commons" is not stand for COMMON. We need a "vendor-xxx.js" only include "node_modules" code, then the "main-xxx.js" will be much smaller.

For now, any little change lead the .next/static/commons/main-xxxx.js 200+ KB file to re-create new one, doesn't make any sense.

[stanleyfok]

any follow up on this? In my case, the main-xxxx.js's hash changes every time I build, no new npm pkgs are installed, and no code change as well

[roytan883]

@stanleyfok https://github.com/roytan883/react-nextjs-mobx-material-ui

[BosenY]

I wanna get like this .next/static/commons/main.js instead of .next/static/commons/main-xxxx.js
how to operate ?

[BosenY]

I resolve it:

config.plugins = config.plugins.map(plugin => {
            if (plugin.constructor.name === 'CommonsChunkPlugin') {
              plugin = Object.assign(plugin, {
                filenameTemplate: `static/commons/main-${dayjs().format('YYYYMMDD')}.js`,
              })
            }
            return plugin
          })

[timneutkens]

This won't work with Next.js 7, and Next.js 7 implements records.json so hashes should be more stable now.