-
-
Notifications
You must be signed in to change notification settings - Fork 177
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
:advanced for webpack #24
Comments
Nevermind I figured it out. The |
No release yet but
There are some other |
It will also require a tweak in the |
I just pushed a new release that should enable The usual This is very experimental and is probably going to need some adjustments. I will try to create a guide for this but apart from providing the externs the only change required should be running |
Quick example: https://github.com/thheller/npm-module-example Important things: When a build with the https://github.com/thheller/npm-module-example/blob/master/externs.js The Its all very manual still and I hope to automate some of it in the future. |
In your example there's a |
What does your config look like then?
This should work? |
Yeah, it's working. And the result is surprising: =>> du -ah dist/*.js
4.0K dist/main.7682f952.js
148K dist/vendor.0139d23f.js Can I write all the configs in that EDN file? |
That is because these must be available before the JVM is launched but I'll eventually move to a central config file. For now I didn't want to mix build related things with classpath things since classpath is also covered by Why is the result surprising? Looks about right for an |
Previously I was using Boot, and the result was 700k+ even in |
Ah ok. |
Checked out my old commit and got The options was right https://github.com/mvc-works/stack-workflow/blob/bdb24382dd3a4a0b20c30720f5e6ae97d3075291/build.boot#L27 . It must be another mistake. |
Good to know. Can you compare the gzip'd sizes? wondering much of a difference the webpack boilerplate code makes in the end. |
Almost the same when I compress them with With Boot: =>> du -ah main.js*
144K main.js
36K main.js.gz With shadow-cljs and Webpack =>> du -ah *.js*
12K main.861c0331.js
4.0K main.861c0331.js.gz
4.0K manifest.json
140K vendor.4780ee50.js
36K vendor.4780ee50.js.gz |
I seem to be incapable of correctly configuring Closing this until someone says otherwise. |
I think we need to move some of this configs to Wiki. Already wanted to read it for several times but had to trace back here. |
Pretty busy with other stuff at the moment so I didn't get far with the docs. I want a full guide about taking a build from dev to release with Thanks for reminding me that docs are more important than new features. I'll try ... |
As a user, a full guide is less important to me actually. Even people offer me a guide, it could be long enough for me to ignore a big part of the details. And it's quite important for me that when I have a need, I can always google and find examples to copy configs from. Will try tomorrow. |
Reading about Webpack 3 scope hoisting this morning, i got an question, is it possible shadow-cljs compile optimized cljs code into 2 bundles and let Webpack see them as bundles? Currently shadow-cljs emits code in CommonJS and it does not benefit from this new feature. https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b |
Scope hoisting does nothing for us since Closure already assumes one global shared scope. You can already just concat Google Closure files together with absolutely no changes and it just works. There are no conflicts, you don't need import/export.
I can add an additional If you really care about performance/file size then use I'm still working on the details since all this gets rather complicated if you factor in code splitting. Ideally I also want 100% interop so JS can import CLJS and vice versa but that will probably only work when we let the Closure Compiler optimize all JS. The webpack support was always meant to support users that have a JS codebase and build setup configured and just want to add CLJS. If your primary language is CLJS we shouldn't need webpack in the end. There is still work to be done for this though. |
I would be fine with
It appear to me we always need Webpack for the CSS issue. Yeah, it's far more complicated than I thought... |
Code splitting ( I have Lately I have been using shadow.markup which does CSS-in-CLJS. It works well but generic CSS support is still useful. No, we won't always need webpack but it is useful for now. |
I found you are using: [{"name":"main", "js-name":"main.md5hash.js", "depends-on":[], ...}
{"name":"extra", "js-name":"extra.md5hash.js", "depends-on":["main"], ...}] I would prefer an HashMap for manifests: {
"main.css": "main.a7a4c1d5.css",
"main.css.map": "main.a7a4c1d5.css.map",
"main.js": "main.a7a4c1d5.js",
"main.js.map": "main.a7a4c1d5.js.map",
"vendor.js": "vendor.1f6ff49f.js",
"vendor.js.map": "vendor.1f6ff49f.js.map"
} I think I should try that now. Anyways I was more familiar with Webpack. |
It is structured that way for a reason (modules in dependency order, includes more than just name:js-name mapping). It will probably never contain css info since that has nothing to do with loading JS. My stuff currently writes a It is however all pure data so should be easy to transform it into any structure you want. |
Agreed. |
The filenames are too uglify.
Can we change it to something like ths?
|
Does that matter at all? Only a machine is reading that and I care more about not ever having conflicts? I don't think the shorter name is any prettier? I can add an option if you really want to ... |
I think that goes away with trust? I rarely look at my release files. I just looked and it currently has 151 files. 4 from current release, the rest from old versions. I keep all old versions in case someone (web crawlers) have old HTML and want to access old JS. I always group my release files in an extra folder as well (eg. Anyways, making this configurable is easy so I'll add it soon. |
When we use Webpack long term caching, we keep all file on CDN. But the |
The plan is to support
:advanced
for webpack by abusing the Closure JSModule support but instead of grouping many files into one JSModule each file gets its own module. Coupled withRescopeGlobalSymbols
that produces something that can be understood by webpack while still being reasonably small and DCE'd.JS side would remain as
require("shadow-cljs/demo.foo").foo()
but the CLJS side would need to add the:export
meta to anything that should be accessible from the outside, ie.(defn ^:export foo [] ..)
.webpack
could then do the chunking as normal. The:browser
style module definition could also be used so we could keep the grouping and expose less files to webpack. API remains the same.the output looks something like this:
$
is the the Closure "global" and everything is rescoped to it. So basically instead of havingcljs.core.assoc
you'd have$.cljs.core.assoc
which then is shortened to something like$.x
.var window = global;
is needed because the Closure Compiler assumes that is the "true" global. Would need a patch to Closure as it is hard-coded. Faking its existence works though.$.module = module;
is required since closure will rewrite EVERYTHING that wants to use a global variable towindow
, sojs/module
becomeswindow.module
notmodule
. Again that would need a Closure patch to add the node.js implicit vars to their set of globals.See: https://github.com/google/closure-compiler/blob/master/src/com/google/javascript/jscomp/RescopeGlobalSymbols.java#L57-L80
I can't figure out why this doesn't work though? Am I just missing something obvious?
@jiyinyiyong any ideas? if I change
$.module.exports
tomodule.exports
it works but I can't yet make the closure compiler emit that.Edit: https://github.com/thheller/shadow-cljs/blob/a2200a3ad6eae4c2e579be306a367ab29bf53ecd/src/test/code_split/a.cljs this file produced the above output.
The text was updated successfully, but these errors were encountered: