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
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!