topic Re: CLI upload main.js file size limited when building with react and threejs in CMS Development

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

AMMehta — Fri, 29 Oct 2021 18:02:16 GMT

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

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

dennisedson — Fri, 29 Oct 2021 19:02:09 GMT

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 )

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

AMMehta — Fri, 29 Oct 2021 19:51:11 GMT

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

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

kierana — Fri, 29 Oct 2021 19:58:42 GMT

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!

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

jjtoikka — Wed, 10 Nov 2021 10:20:27 GMT

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

Hopefully helps!

Cheers, JJ

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

ameen_khan15 — Mon, 29 Nov 2021 16:29:00 GMT

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

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

assi — Wed, 02 Mar 2022 13:23:20 GMT

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

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

Stefaninoo — Wed, 01 Mar 2023 10:27:16 GMT

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.