# Webpack code splitting - plugin doesn't load

**URL:** <https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776>\
**Category:** UXP Plugin API\
**Tags:** react, javascript, webpack, package\
**Created:** [June 9, 2022, 3:32pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776 "2022-06-09T15:32:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [June 9, 2022, 3:32pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/1 "2022-06-09T15:32:08Z")

</div>

Does anybody here use [Webpack code splitting](https://webpack.js.org/guides/code-splitting/)? I’m trying to reduce size of my _index.js_ and so far I have these bits in Webpack config:

```javascript
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_ 🤔 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?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [June 9, 2022, 6:45pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/2 "2022-06-09T18:45:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [June 9, 2022, 6:58pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/3 "2022-06-09T18:58:16Z")

</div>

I don’t know TBH 🙂 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 🙂

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [June 9, 2022, 7:01pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/4 "2022-06-09T19:01:26Z")

</div>

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

My settings:

```auto
	performance: {
		maxEntrypointSize: Infinity,
		maxAssetSize: Infinity,
	},

```

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [June 9, 2022, 7:02pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/5 "2022-06-09T19:02:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![gregbenz](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/gregbenz/32/953_2.png) [@gregbenz](https://forums.creativeclouddeveloper.com/u/gregbenz)\
**Post date:** [June 11, 2022, 6:46pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/6 "2022-06-11T18:46:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [June 11, 2022, 8:30pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/7 "2022-06-11T20:30:43Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [December 6, 2023, 4:55pm UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/8 "2023-12-06T16:55:53Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [December 7, 2023, 10:58am UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/9 "2023-12-07T10:58:21Z")

</div>

In web browser you would use [import() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) …but UXP is not web browser so I have no idea whether this works or not 😃

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

Or you could load text string from file and do dirty `eval` 😃

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [December 7, 2023, 11:02am UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/10 "2023-12-07T11:02:35Z")

</div>

> [@Jarda](#):
>
> In web browser you would use [import() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) …but UXP is not web browser so I have no idea whether this works or not 😃
> 
> You could try `require()` but UXP is not NodeJS either.

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

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [December 7, 2023, 11:06am UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/11 "2023-12-07T11:06:58Z")

</div>

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](https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksminchunks) and set min chunks to `2` You might also need to change entrypoints and outputs [Code Splitting | webpack](https://webpack.js.org/guides/code-splitting/)

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [December 7, 2023, 11:20am UTC](https://forums.creativeclouddeveloper.com/t/webpack-code-splitting-plugin-doesnt-load/4776/12 "2023-12-07T11:20:53Z")

</div>

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