sveltejs/svelte-loader

Generated bundle size doubled between svelte-loader 2.13.6 and 3.0.0 Why?

martonx opened this issue · 3 comments

Hi,

I have this webpack.config:

const path = require('path');

module.exports =(env, argv) => {
	const config = {
		entry: './main.js',
		resolve: {
			alias: {
				svelte: path.resolve('node_modules', 'svelte')
			},
			extensions: ['.mjs', '.js', '.svelte'],
			mainFields: ['svelte', 'browser', 'module', 'main']
		},
		output: {
			path: path.resolve(__dirname, 'dist'),
			filename: 'bundle.js',
			chunkFilename: 'bundle.[id].js'
		},
		module: {
			rules: [
				{
					test: /\.svelte$/,
					exclude: /node_modules/,
					use: {
						loader: 'svelte-loader',
						options: {
							hotReload: true
						}
					}
				}
			]
		},
		mode: argv.mode === 'development' ? 'eval-source-map' : 'none'
	};

	return config;
};

I have a small gallery svelte app. My bundle size was ~8 kbyte with webpack 5 and svelte-loader 2.3.16
Now I updated svelte-loader to 3.0.0. My bundle size is ~18kbyte.

Why?

Please advice, how can I reach the original ~8kbyte bundle size?

I attached my zipped sourcecode. For repro:
yarn
yarn build
now the generated bundle is ~8kbyte

update svelte-loader to 3.0.0
yarn
yarn build
now the generated bundle is ~18kbyte

SvelteGallery.zip

non25 commented

Because hotReload (HMR) actually works in 3.0.0 and you have it enabled permanently for both production and development modes, while it should be enabled only for development.
It works by appending module-updating code to each component, which increases bundle size.
Take inspiration from the official template: https://github.com/sveltejs/template-webpack
Doing config right might even reduce your bundle below 8k.

It is small again. Thank you very much!

non25 commented

@martonx looks like your problem was solved, do you mind closing issue ?