Comments (4)
Did a bit of a POC on this. You can see it here,
https://differential-loading.now.sh/#home
If you view the source you can see that theres a few new bits in that HTML. Specifically a reference to both bootstrap.js
and bootstrap.legacy.js
.
Changes
This build required several changes.
cli-build-app
Changes can be seen here.
- The build now makes two passes, one for modern and one for legacy. It all happens during the same build, just two different compilations.
- Legacy builds are now suffixed with
.legacy
to keep them apart from modern builds (since they all exist in the same build space). - Added a new plugin, webpack-module-nomodule-plugin to create the appropriate
module
andnomodule
script tags. - Because of the new plugin, I had to update
html-webpack-plugin
. - Because of the updated
html-webpack-plugin
, had to updateInsertScriptPlugin
to use new hooks.
webpack-contrib
Changes can be seen here. Added a "legacy" option to the build time render plugin, which controls whether or not the plugin uses modern or legacy build files. Build time legacy
Problems
- This probably broke watch and serve, given the use of
MultiCompiler
instead ofCompiler
. There is also some question on how the stats get merged if there is an error in one of the compiler instances. - The preloaded scripts that get output during BTR don't include the legacy versions. I'm not really sure how the preloads would be directed for modern vs legacy builds.
- In theory, the CSS extraction only needs to happen during one of the builds. Extracting the same CSS two times is a waste.
- Not sure what to do about
manifest.json
. Currently generating two, but it seems like regularmanifest.json
would be enough given that legacy builds aren't meant for environments that can run PWA.
from cli-build-app.
OK! Attempt 2.
POC: https://differential-loading-poc.rorticus.now.sh/#home
Source: https://github.com/rorticus/differential-loading-poc
This approach differs from the last in that instead of using two separate webpack builds, there is only one build. A plugin creates a child compiler to output the modern version. This causes two sets of files to be created:
- Modern files which end in
.modern.js
- Legacy files end in
.js
Changes
Changes to webpack-contrib
and cli-build-app
were necessary.
cli-buid-app
- The base config now uses
babel-loader
to transpile the output into a legacy build. - This config is then processed with the
BabelEsmPlugin
, which has been slightly modified from the the plugin here. The original plugin was modified to completely removebabel-loader
rather than just remove its rules. - The dist config had to be modified to preserve chunk output names with
BabelEsmPlugin
.
webpack-contrib
- Included
BabelEsmPlugin
mentioned above. - Modified BTR to update both modern and legacy versions of the manifest.
Problems
- No source maps - BabelEsmPlugin currently has a problem outputting source maps.
- Invalid
manifest.json
. Both builds (legacy and modern) are creating a file namedmanifest.json
. The latter build wins during the output generating and the manifest for the legacy build is lost to time. - Because not all files are in the manifest, BTR was updated to manually search for legacy files (bootstrap and blocks) and manually updates them.
- The
isLegacy
flag does more stuff than just javascript. These features would probably need to copied over to BuildEsmPlugin so that the "other" things still happen.
from cli-build-app.
I've picked up where Rory left off with the second approach.
I was able to get source maps working by just applying a fix made for them since the original effort to the modified version of the plugin.
The next thing I've been working on is getting externals working, as the original plugin does not support them. Right now I've updated the plugin to apply the externals plugin and it now processes our externals config, but scripts are still not being injected in index.html.
Update: The scripts were not being injected because they were being removed by the ModuleNoModule
plugin in base.config.js
. However, even after removing that they are still not working. The modern
code is still referencing the external by the name of the argument it gets passed in to the code as in the normal bundle, but the wrapping function and logic to retrieve the external dependency are missing. I suspected that the FunctionModulePlugin
was the piece missing in this equation but so far am unable to get a working build with that included.
from cli-build-app.
I reworked the babel esm plugin to be a generalized "additional compile" plugin. The results so far seem promising and doesn't force us into using babel. I also updated the API to allow changing loader options as well as adding/removing loaders which enables most of the other legacy vs non legacy differences. There's still some issues to track down like arrow functions appearing in legacy code now.
Changes to webpack-contrib and clil-build-app can be seen here and here
from cli-build-app.
Related Issues (20)
- Move to eslint for consumers
- POC build using snowpack HOT 3
- Command exits when using watch or serve HOT 1
- `single-bundle` and `omit-hash` schema options are unused
- Unable to use dependencies installed using npm link
- Avoid iltorb native dependency HOT 5
- POC build using esbuild HOT 1
- Source map paths are flattened
- Upgrade to webpack 5 HOT 1
- Proxy configuration not being honored HOT 4
- On my local machine i have problems to run the dojo "npm run build" command, please help, on other machines it just runs fine HOT 4
- Cyclic dependency errors with @arcgis/core package HOT 13
- Builds fail with web3 HOT 3
- Add the ability to store resources against individual pages in the cache for Build Time Render
- BTR should skip tel links HOT 1
- build fails after upgrading to v7 when there are widgets that use i18n with horrible error message
- @dojo/cli-build-app does not work with M1 macs
- Fresh Generated Sample Program get errors on compile, cannot proceed development HOT 3
- Bug #475 Fresh Generated Sample Program get errors on compile, cannot proceed development still happens
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cli-build-app.