Transpiled .html files are too large

[enuchi]

Transpiled .html files are too large

[piavgh]

Thank you @enuchi ,

It's a private repository of my company so I can't share it.

I will check those webpack links. I will close this issue now. Seems that it's solved

[enuchi]

Hey @piavgh not sure why that's happening. Is it only on the html files or are you also seeing large files on the transpiled server code?

[enuchi]

Hi @piavgh, following up on your large bundle comment. I am seeing the same issue now, and it looks like it is due to the output: { beautify: true } setting for UglifyJs in the webpack config. This setting is useful for server side code, so that for any errors that are thrown you at least know which function threw the error. If it's fully minified, you will get an unhelpful function name.

However, it is probably not needed in the shared, ie client + server webpack settings -- for client side code it is optimal to minify react bundles, as you are more likely to have large bundles, for example react and other client side libraries. I will update the webpack settings so that the beautify: true setting is only applied to the server-side code. This should hopefully fix your issue.

Note that I think the browser may still freeze when you open the script in script.google.com if you have large code base or many packages but let me know.

[piavgh]

@enuchi : Hi, thank you for your information.

In my case, only .html files are large and can't be opened on script.google.com.
My server-side code is normal and can be opened without any problem.

The reason that my bundles are 2-3 MB each file is because I'm using Ant design and Firebase, which are huge libraries:
ant-design/ant-design#12011
firebase/firebase-js-sdk#332

I think if I don't use these libraries, the bundles are just 500KB+ maybe.

[enuchi]

hi @piavgh, do you mind setting beautify: false in this line in the webpack file, then run npm run build and see how big the bundles are?

[piavgh]

@enuchi : I've just tested it.
The bundle size is reduced from 2.8MB to 2.2MB.

[enuchi]

Got it. So I'm guessing it's mainly the large libraries you pointed out above. If you have a repo I can clone and test out I'm happy to look at it. You may also want to look into code splitting and defining chunks for these large libraries.

code splitting
lazy loading
split chunks docs

I'll update the client-side webpack config to beautify: false at some point soon, since that also reduced the size for client bundles for me.

[enuchi]

Have been thinking about this more @piavgh and think I have a better solution. I took my bundle down from around 500kb to 60kb, and now the html pages don't crash my browser in the Google Apps Script IDE.

Google's HTML Dialogs don't allow importing separate .js files in your html file, for instance you can't do: <script src="./bundle.js"> like with normal websites. My current approach is to 'inline' the entire code bundle into one html file. Code splitting won't help because that will just try to make bundle1.js, bundle2.js etc, which will then get inlined, and the overall size will be the same.

An alternative approach is to load every external library from a CDN. This will help with your package size and hopefully do some caching for you for faster loading. There is a great webpack plugin I found that will do this for you called dynamic-cdn-webpack-plugin. This will scan your imports and create script tags that load all your external libraries, for instance react, react-dom, and in your case hopefully ant-design and firebase get loaded from cdn.

Try the following:

1. npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
2. in webpack.config.js add the following import, and modify clientConfigs

// at top of file
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
...
// modify clientConfigs to add the new plugin, and change inlineSource
const clientConfigs = clientEntrypoints.map(clientEntrypoint => {
  return {
    ...clientConfig,
    name: clientEntrypoint.name,
    entry: clientEntrypoint.entry,
    plugins: [
      new HtmlWebpackPlugin({
        template: htmlTemplate,
        filename: clientEntrypoint.filename,
        inlineSource: '^[^(//)]+.(js|css)$', // 1. change this line to embed all js and css inline, but exclude packages with '//' to allow dynamic cdn insertion of external libraries
      }),
      htmlWebpackInlineSourcePlugin,
      webpackCleanPlugin,
      new DynamicCdnWebpackPlugin(), // 2. add this line here
    ],
  };
});

3. Also move the optimization object from sharedConfig to serverConfig with beautify: true as discussed above so that only the server code is beautified.

Let me know if you have success!

[enuchi]

Should be fixed by #25