CLI upload main.js file size limited when building with react and threejs

[AMMehta]

Is there a way around the file size limitation. I am building a react module with three js (using the cms-react-boilerplate). The project builds fine but it cant uplaod the main.js file as it is 2.1MiB. it gives me the following error:

[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB

I tried to upload the file directly to the design manager but was given the same error. 

I also tried to create a main.js file and past the code into it but was give the following error: 

1. Error:Coded file buffer must be smaller than 2.0 MiB

[kierana · Accepted solution]

Hey @AMMehta that's a big file! I'd recommend enabling code splitting. If not, you're going to need to use a different host for the Javascript files. Additionally - make sure you're correctly including only what you need. Avoid 

import * as x from 'lib';

and instead do:

import { each, func, you, need } from 'lib';

this will allow bundlers such as Webpack to properly Tree Shake your dependencies.

Good luck!

[Stefaninoo]

As mentioned already, minimizing main.js can temporary work around this issue.

Easiest way I found to do this when still developing is by adding to the webpack the following object:

optimization: {
  minimize: true,
}

 This has been so far just fine for me and as long as the compressed file won't exceed the size limit it should be ok.

However looking at splitting the main.js file into several smaller files is the stable solution you want to look for.

[assi]

Another solution is use optimization.splitChunks option to devide one large file into several smaller files.

[ameen_khan15]

Try compressing your files into .min.js files with this if you are done editing them.

[jjtoikka · Accepted solution]

Hi,

I had the same issue, so I made improvements to the Webpack config files. Created one for dev and one for production. Got the file size down to 500kt. I'm using the built npm library, so the boilerplate build must add a lot of extra stuff there. The configs in the HS boilerplate repo is not optimized well. Added also local development environment, so you don't have to push to HS all the time, instead develop local and in the end push to HS. This is a Typescript example.

in package.json

"start": "webpack serve --open --config webpack.dev.js", // local
"start-hs": "webpack --watch --env autoupload --config webpack.prod.js" // HS

webpack.common.js

const path = require('path');

module.exports = {
  entry: {
    main: './src/index.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    publicPath: '/',
  },
};

webpack.dev.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = merge(common, {
  mode: 'development',
  target: 'web',
  // devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    writeToDisk: true,
  },
  plugins: [
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new CopyWebpackPlugin([{ from: 'src/images', to: 'images' }]),
    new HtmlWebpackPlugin({
      title: 'Dev',
      template: path.resolve(__dirname, 'src/public/index.html'),
      inject: true,
    }),
  ],
});

webpack.prod.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const HubSpotAutoUploadPlugin = require('@hubspot/webpack-cms-plugins/HubSpotAutoUploadPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const webpack = require('webpack');

const hubspotConfig = ({ portal, autoupload } = {}) => {
  return merge(common, {
    mode: 'production',
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
      }),
      new HubSpotAutoUploadPlugin({
        portal,
        autoupload,
        src: 'dist',
        dest: 'avidly-react-app',
      }),
      new CopyWebpackPlugin([
        { from: 'src/images', to: 'images' },
        {
          from: 'src/modules',
          to: 'modules',
        },
      ]),
    ],
  });
};

module.exports = [hubspotConfig];

Hopefully helps!

Cheers, JJ 

[AMMehta]

A work around or a way to reduce my file size works.

[kierana · Accepted solution]

Hey @AMMehta that's a big file! I'd recommend enabling code splitting. If not, you're going to need to use a different host for the Javascript files. Additionally - make sure you're correctly including only what you need. Avoid 

import * as x from 'lib';

and instead do:

import { each, func, you, need } from 'lib';

this will allow bundlers such as Webpack to properly Tree Shake your dependencies.

Good luck!

[dennisedson]

Did you know that @kierana is one of the smartest fellows I know?  If anyone has a workaround, it would be him

(no pressure, @kierana )