scalacenter/scalajs-bundler

lazno

@lazno

Hi Sebastien.
we were on 0.6.33 with sbt-web-scalajs-bundler-sjs06 0.18.0 and no deprecation warnings
I now verified that 0.19.0 also didn't cause any deprecation warnings
Sadly I am forced to do the jump straight to 1.3.1 since one of our dependencies was only published for that version. And from what I understand the bundler only supports scalajs 1.3.1 from version 0.20 onward

lazno

@lazno

i think the problem lies somewhere in the way our folder structure is configured. our client application is located in a "client" subproject
projectroot/client

and the folder layout in there is as follows
projectroot/client/src/main/js
projectroot/client/src/main/scala
projectroot/client/webpack
projectroot/client/public

and this is the config in build.sbt to reflect that layout

   webpackResources := baseDirectory.value / "webpack" * "*",
    webpackConfigFile in fastLinkJS := Some(baseDirectory.value / "webpack" / "webpack-fastopt.config.js"),
    webpackConfigFile in fullLinkJS := Some(baseDirectory.value / "webpack" / "webpack-opt.config.js"),
    webpackConfigFile in Test := Some(baseDirectory.value / "webpack" / "webpack-core.config.js"),
    webpackDevServerExtraArgs in fastLinkJS := Seq("--inline"),
    webpackBundlingMode in fastLinkJS := BundlingMode.LibraryOnly(),

i succeeded in making the whole thing compile when i change the above to use fullOptJS and fastOptJS instead of the linker version. which i don't quite understand to be honest, since to documentation states to use the fast/fullLinkJS in the newest versions.

i still get the sourcemap warnings though

vonchav

@voonchav_gitlab

Hi all, I was wondering why jsdom 9.9.0 is used as the default version. There is probably a reason that I'm not aware of. Just curious, as that version is 4 years old :)

Kahli Burke

@kahliburke

Forgive me if this is documented somewhere, I've tried to search around. I'm upgrading a project from Scala 0.6.x to 1.3.1 and attempting to update all the various SBT plugins at the same time. So I've started using the scalajs-bundler but now the sourcemaps for the JS files are handled by webpack instead of getting packaged up with the Play assets. Is there a canonical way to make sourcemaps work with Play and scalajs-bundler?

I do get a sourcemap generated, but it points at a relative path like ../../../../src/main/scala/org/...

So the browser tries to resolve it at http://localhost:9000/src/main/scala/org/...

Kahli Burke

@kahliburke

Hmm I see that they are working in the example play project inside the scalajs-bundler repo, so I guess I probably need to debug on my side

Kahli Burke

@kahliburke

Aha ... that project is using the webpackBundlingMode := BundlingMode.Application default, if I change to the webpackBundlingMode := BundlingMode.LibraryOnly() mode, sourcemaps stop working there in the same way. Any advice on the right way to make these work?

Eric K Richardson

@ekrich

@kahliburke Did you start by upgrading to the latest version of 0.6 and remove deprecations etc. People have said that should be the first step.

Kahli Burke

@kahliburke

@ekrich oh yeah things are working in general, just have this issue with the way the source maps are generated and not being processed by Play in the same way they used to be (run through digest pipeline and served under a hashed asset url). The example play project in the scalajs-bundler repo shows the same behavior when using the settings mentioned above. I want to use those aettings to avoid the long processing times running scalajs output through webpack in development.

Eric K Richardson

@ekrich

There have been some discussions on the Scala.js list now that code splitting is supported about using some other tool. I am not directly involved so I can't remember the name. I try and see if I can find it.

It was snowpack but you can just scrollback a little bit to see the larger discussion - https://gitter.im/scala-js/scala-js

@kahliburke :point_up:

Kahli Burke

@kahliburke

@ekrich Thanks for the reference, in this case I'm not really concerned with the way that the code is split. I'm happy with the external JS libraries being bundled to one file and the ScalaJS output to another. It's just the source map doesn't work out of the box, I'd need to add server routes for http://host/src/* for the browser to resolve them. Which I'm somewhat OK doing as it's only for development purposes, I can disable that route for production. But since it worked "out of the box" previously before I switched to scalajs-bundler, I thought I'd see if there's a better solution first.

I will check out snowpack use too, although it would be nice to stick with something more SBT oriented.

Eric K Richardson

@ekrich

Good luck, just wanted to let you know as code splitting is really cool to have as an option.

Mark de Jong

@Fristi

Is there a write up about reducing the bundle size? Quickly scanning through this channel it's kind of a duplicate quesetion being asked... I've seen some docs Bundling mode, but I think there is more to it I think:

Specific bundles which can be identified with maybe https://www.npmjs.com/package/webpack-bundle-analyzer ? I tried it, but couldn't make it work yet
What scalajs libs contribute to a large size?
Does tree shaking work? And what would be needed to enable it?
Does code splitting work with this plugin? And what would be needed to enable it?

At the moment with fullOptJS::webpack my bundle size is 7,2 mb (using scalajs-react, circe, endpoints4s, droste (local build)).. I guess there are transitive dependencies and maybe code which is not being used?

Julien Richard-Foy

@julienrf

@Fristi The Scala.js optimizer removes unused Scala code. Webpack won’t include dependencies that are not imported. So, the only thing I can think of is to make sure that your NPM dependencies are also minified (remember that fullOptJS does minify the output of Scala.js, but it doesn’t process your dependencies).

Julien Richard-Foy

@julienrf

@Fristi what is the size of the -opt.js file produced by Scala.js?

Mark de Jong

@Fristi

@julienrf notistack-frontend-opt.js is 823kb

Julien Richard-Foy

@julienrf

Ah, it seems that your NPM dependencies bring the remaining 6 Mo. Make sure to compress them. See https://webpack.js.org/configuration/optimization/#optimizationminimize

Mark de Jong

@Fristi

Thanks! :) It seems the most of the bundle size is ruled by tailwind.. all css is bundled. They are using purgecss to clean it up, there is a webpack plugin for that. Figuring out how to configure it in conjuction with scala js

Mark de Jong

@Fristi

Fixed it, if someone in any case want the same thing with purgecss:

const glob = require('glob');
const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    purgecss({
        content: glob.sync('../../../../**/*.scala'),
        defaultExtractor: content => {
            const regex = /className := "(.*?)"/g;
            const result = [...content.matchAll(regex)].map(match => match[1]) || [];
            return result.map(x => x.split(' ')).flat();
        }
    })
  ]
};

Mark de Jong

@Fristi

The downside, is that it will not work when you use dynamic className inside your scala code

Mathieu

@mathieuleclaire

Hi, I asked a question in the issues section on github, but perhap's it was not the appropriate place. Here is my issue (https://github.com/scalacenter/scalajs-bundler/issues/194#issuecomment-773490925). It should be something trivial to achieve with scalajs-bundler I guess.

Julien Richard-Foy

@julienrf

Do you know how this problem would be solved in plain JS+Webpack?

Mathieu

@mathieuleclaire

This seems to be the way to solve it ij js+webpack: https://github.com/ajaxorg/ace/blob/master/demo/webpack/demo.js#L12. Note that I do not need the "dynamic" mode loading. I basically need one theme and 2 or 3 language mode. A webpack config is set in the demo repository: "https://github.com/ajaxorg/ace/tree/master/demo/webpack/webpack.config.js"

Julien Richard-Foy

@julienrf

I guess you tried the solution I suggested in my last comment? With @JSImport

Mathieu

@mathieuleclaire

This solution means I need to choose in my facade what theme or mode I want. Or I need to JsImport all modes and themes provided by ace ?

Julien Richard-Foy

@julienrf

Ah sorry, I thought you didn’t need dynamic module loading

But yes, one solution would be to bundle all the possible modes and themes, but it might be impractical… So, maybe you want to resort to dynamic module loading.

Mathieu

@mathieuleclaire

Does it mean, that all js mode would be packed in my js file ?

It could possibly be huge

And you are right, I don't need dynamic loading, just a couple of identified modes and one or two themes

Julien Richard-Foy

@julienrf

I don’t follow. On the one hand I understand that you say that you only need a couple of modes and themes, and on the other hand I understand that you say that the resulting bundle could be huge.

Mathieu

@mathieuleclaire

If I use a the dynamic strategy I mean.

Julien Richard-Foy

@julienrf

With dynamic module loading, the dynamically loaded modules would not be part of the bundle, so the bundle wouldn’t be huge

But I’ve never tried to do that in Scala.js, so I can’t really help :-/

Mathieu

@mathieuleclaire

OK, but the dynamic loaded module is used if you want to have all syntax highlighting potentially for all languages, which is not my case.

I tried with extra JSImport but the output js remains the same

but I guess my syntax is wrong

Julien Richard-Foy

@julienrf

Do you also refer to the JSImported module in your program entry point?

Mathieu

@mathieuleclaire

No. And that was the key.

Mathieu

@mathieuleclaire

So this works: in my facade:

@js.native
@JSImport("ace-builds/src-noconflict/mode-scala.js", JSImport.Namespace)
object scalamode extends js.Object

and I need to call scalamode in my program entry point

Is it the regular way to achieve this ?

Julien Richard-Foy

@julienrf

Yes, Webpack only includes modules that are “used”, in the resulting bundle

Do you mind updating the related issue?

Mathieu

@mathieuleclaire

Yes, sure. Thanks for helping !

Where communities thrive

People

Repo info

Activity