Hide raw .svelte files from developer tools in production

user_8445072 0
Viewed 1036

currently when i open developer tools in a browser i can see my raw svelte components i'd like to hide this information and send only the uglified code.

this is what i get when open developer tools. I am building a single page application.

this is my rollup.config.js

this are the scripts I use to run the project/rollup. found in package.json

 "scripts": {
      "build": "rollup -c",
      "dev": "rollup -c -w",
      "start": "sirv public --host 0.0.0.0 --port 2222 --single"
}

for production i run npm run build

enter image description here

I have set sourcemap: false, in rollup.config.js, the source file has disappeared from the /public/build folder, however browsers still show the components

rollupjs svelte
3 Answers

If you use the default svelte template it is configured to include the source maps, in your rollup.config.js change the output object to

output: {
   sourcemap: !production
}

this will enable sourcemaps while developing, but not when you are in production

user_119561070

Short answer: use the latest plugins for rollup while building then in rollup.config.js set output.sourcemap: false

As you can see in the photo attached in the question the .svelte files are colored in blue, this indicates that Opera/DevTools treats them as CSS files.

Also the files are inside /build

if you set output.sourcemap: true the .svelte files will show up in a new /src folder in the devtools which will be treated as javascript files in the devtools colored yellow. You will also have the source files in /src and /build

this issue is due that rollup-plugin-svelte in version 6.0.0 used to compile a sourcemap of the CSS of the project. this sourcemap loaded the whole raw .svelte file instead of just the css. this will lead to a CSS file in the dev tools that includes your whole svelte code of each component (colored blue in devtools as my issue)

in rollup-plugin-svelte version 7.0.0 this issue is resolved as rollup-plugin-svelte no longer handles the generation of the css and a new plugin is being used rollup-plugin-css-only (v3.1.0 on the moment of writing)

Solution: use the latest plugins (specifically rollup-plugin-svelte)

user_84450720

The other two answers didn't work for me. No matter what I tried, the svelte source files were still showing up in the CSS bundle source map. I gave up after spending a long time trying to configure rollup, and just wrote an inlined plugin to delete the source map files:

function rmSourceMaps() {
  return {
    name: 'rmSourceMaps',
    generateBundle() {
      fs.rmSync('public/build/bundle.css.map', { force: true });
    }
  }
}

You can then use it like so:

{
  plugins: [
    production && rmSourceMaps()
  ]
}
user_4400940
Related