Webpack code splitting - plugin doesn't load

Photoshop UXP Plugin API
, , ,
#1

Does anybody here use Webpack code splitting? I’m trying to reduce size of my index.js and so far I have these bits in Webpack config:

module.exports = {
    context: path.resolve(__dirname),
    entry: {
        index: { import: '/src/index.tsx', dependOn: ['react'] },
        react: ['react', 'react-dom'],
    },
    output: {
        path: path.resolve(__dirname, 'build/dev'),
        filename: '[name].js',
        clean: true,
        publicPath: ''
    },

    // ...

And it generates both index.js and react.js files, but I can’t find any reference in index to that react.js :thinking: And when I try to load a plugin, it just doesn’t - blank panel and no errors.

What am I missing? Is it even worth bothering with asset file sizes?

#2

Why would you reduce size?

I did code splitting but I rather used 2 separated configurations and then used import() But that was in CEP.

#3

I don’t know TBH :slight_smile: Webpack gives these performance warnings because of sizes. I know I can turn them off via config, but thought maybe warnings are not just because :slight_smile:

#4

Ah… these are for websites not plugins. Simply turn it of and forget. :smiley: Unless we talk about hundrets of megabytes :smiley:

My settings:

	performance: {
		maxEntrypointSize: Infinity,
		maxAssetSize: Infinity,
	},
2 Likes
#5

Yep :slight_smile: Was wondering what are the settings on Alchemist, so already checked before posting here :slight_smile: Just wanted to be sure. Will do the same. Thanks

#6

Unless you’re looking to lazy load because your code is massive and therefore slow to open, I wouldn’t bother.

1 Like
#7

Actually I started to look into this more because I had to use lazy loading (had to implement dynamic loading by component path), than the warning itself :slight_smile: