Svelte jsapi 4.19: Tons of Build Files

[LandonPatterson2]

Hey,

So I have been working on building a svelte app with the @arcgis/core. Of course I am using rollup (config below).  When I go to build (rollup -c) or dev (rollup -c -w) I get a TON of files written to either the build or assets folder.  I have tried a few different things to mitigate this as it make dev impossible with over 300 or so files. 

Is there a way to change my rollup.config.js file so I don't have a 20mb assets or build folder?

rollup.config.js

import svelte from "rollup-plugin-svelte";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import del from "rollup-plugin-delete";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import css from "rollup-plugin-css-only";

const production = !process.env.ROLLUP_WATCH;

function serve() {
  let server;

  function toExit() {
    if (server) server.kill(0);
  }

  return {
    writeBundle() {
      if (server) return;
      server = require("child_process").spawn(
        "npm",
        ["run", "start", "--", "--dev"],
        {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true,
        }
      );

      process.on("SIGTERM", toExit);
      process.on("exit", toExit);
    },
  };
}

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    name: "app",


    dir: "public/build",
    format: "esm",
  },
  plugins: [

    svelte({
      compilerOptions: {
        // enable run-time checks when not in production
        dev: !production,
      },
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: "bundle.css" }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
      browser: true,
      dedupe: ["svelte"],
    }),
    commonjs(),

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload("public"),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser(),
  ],
  watch: {
    clearScreen: false,
  },
  preserveEntrySignatures: false,
};

package.json

{
  "name": "jsapi-svelte-template",
  "version": "4.19.0",
  "scripts": {
    "build": "npm run copy && rollup -c",
    "dev": "npm run copy && rollup -c -w",
    "start": "npm run copy && sirv public",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
  },
  "devDependencies": {
    "@arcgis/core": "^4.19.0",
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-delete": "^2.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "ncp": "^2.0.0",
    "sirv-cli": "^1.0.0"
  }
}<div> <div><span>main.js<li-code lang="javascript">import App from "./App.svelte";
import esriConfig from "@arcgis/core/config.js";
esriConfig.assetsPath = "./assets";

const app = new App({
  target: document.body,
});

export default app;

[ReneRubalcava · Accepted solution]

If you're using 4.19, you don't need to copy the assets anymore, you can remove that script from your package.json.

https://developers.arcgis.com/javascript/latest/release-notes/#assets-for-local-builds

That will cut down on all those extra files.

[LandonPatterson2]

So I took out the copy command (thanks for letting me know on that).  However, I still have a ton of files being written to my build folder though.  Is that to be expected?

[ReneRubalcava]

Yes, you will still get about 300 js files in a built app with rollup. You won't use them all, but because of dynamic module loading and the way rollup chunks files, you get a good amount of them. This because depending on your data, you could use them. This is completely expected. You'd maybe use a dozen or so at runtime.