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:

8

I think I’d like to do this, not for performance reasons, but to be able to use conflicting sp-elements and SWC components in the same plugin (although not in the same component).

What I’m imagining in its most basic form is a panel that has a main component that renders two child components as tabbed pages. All components share the main JS bundle, and one child component loads a secondary bundle that has the SWC components.

Where I’m confused is as how one might go about serving the secondary bundle to the plugin.
Currently I just use a <script src="bundle.js"> in my index.html file.

All that said, I’m not sure that this is the way to achieve what I’m imagining or if it’s really possible…

9

In web browser you would use import() - JavaScript | MDN …but UXP is not web browser so I have no idea whether this works or not :smiley:

You could try require() but UXP is not NodeJS either.

Or you could load text string from file and do dirty eval :smiley:

10

I’ve tried these dynamic import approaches but if I’m understanding things correctly Webpack just bundles them into the main output regardless.

11

Webpack has settings for that. It can do both. If webpack doesn’t do chunks… it is because of settings. You could try SplitChunksPlugin | webpack and set min chunks to 2 You might also need to change entrypoints and outputs Code Splitting | webpack

12

That’s what I was expecting Webpack to do :joy:
I’ll go and look at chunks in more detail, I think that’s probably where I’ve slipped up.