Splitchunk plugin with dynamic import

Question

I am using dynamic import at route level with react router and also for some common modal components.

There is a utils folder with all atoms, like button, calendar, form etc.

When using default config of splitchunk plugin, these utils and other common components are part of entry chunk (have Single entry points).

When using a cache group in splitchunk config, it extracts the common components to a separate chunk.

common: {
   name: 'common',
   minChunks: 3,
   reuseExistingChunk: true,
   enforce: true,
   priority: -20,
}

Is it a good idea to extract common code like this?

Now when using mini-css-extract-plugin plugin, it gives conflicts warning.

WARNING in chunk common [mini-css-extract-plugin]
    Conflicting order. Following module has been added:
     * css ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./src/js/views/xtra/Tab/Tab.sss
    despite it was not able to fulfill desired ordering with these modules:
     * css ./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./src/js/views/Box/Box.sss
       - couldn't fulfill desired order of chunk group(s) Box
       - while fulfilling desired order of chunk group(s) Bucket

Though I didn't notice any issue in UI. Any idea about it?

Also if I use style loader in dev, it breaks the UI in many places as it is adding style tag on demand which breaks the order of css. we are not using modular css. any idea how to fix this?

Splitchunk plugin with dynamic import

0 Answers0