Comments (12)
@akx @mjtamlyn are you using django-webpack-loader version 1.0.0?
The changes introduced by django-webpack-loader and webpack-bundle-tracker 1.x
were made to accommodate the "basic" behavior of a single entrypoint per template, so the render_bundle
is now used to render the entrypoint with all its chunks. How chunks are organized it's a Webpack matter.
Have you tried the dependOn
option from Webpack 5? I think it enables you to separate your "shared" entrypoint: https://webpack.js.org/guides/code-splitting/#entry-dependencies
But for others reading this thread, note that's not the recommended config. Webpack docs say:
Although using multiple entry points per page is allowed in webpack, it should be avoided when possible in favor of an entry point with multiple imports
from webpack-bundle-tracker.
We have change behavior for two reasons :
- To avoid choosing order in HTML when Webpack already knows the correct order of loading.
- To avoid handling environment specifics. Ex: When you have different settings by environment who do not produce same chunks.
With this new structure, only app chunks are shown and know loading order of assets.
I don't understand why do u need to know shared chunk in chunks section ?
If your answer make sense, we will better handle your case.
from webpack-bundle-tracker.
We have React components that are loaded into various Jinja2 templates using a template tag and the chunk's name (e.g. {{ react_component("dev-view") }}
), which injects the JS tag required.
In addition, all views will have a tag to load the shared
and global
chunks.
If I'd just be able to know which physical file(s) made up the shared
chunk (that is, if non-app chunks appeared in the output), that'd be enough, I could handle deduplicating shared/global in my code.
from webpack-bundle-tracker.
I think i'm missing something. If i understand well, you are using multiple template tag on same view and you want to avoid redondant loading of shared and global ?
If i understand well the case, i never used multiple app in same view. It will be better to keep old behavior and add a option for those who want to load app with deps directly.
from webpack-bundle-tracker.
I think i'm missing something. If i understand well, you are using multiple template tag on same view and you want to avoid redondant loading of shared and global ?
Yes, indeed. We have shared and global in head, and the script tags for each view are splatted into body in-place.
Right now I can't use WBT 1.x, because
- I can't know the
shared
chunk's URL, since it's not listed at all - When rendering a particular entry point, I'd have to guess which assets I already have included in the page to filter them out (okay, granted, for this use case I just know it's the one whose name starts with
shared.
, but still)
from webpack-bundle-tracker.
Just to mention this is a problem for me too. It's causing redundant duplicate loads of our "common" (split chunks) module. In practice it isn't the end of the world as nothing in the common chunks has side effects, but it does increase the overheads on most pages.
from webpack-bundle-tracker.
@fjsj No, we have an in-house solution to read and render the bundles – the gist of it (heh) is in this gist: https://gist.github.com/akx/9a6f2a6ce89c86819240119eea6a907e
from webpack-bundle-tracker.
I'm unable to reproduce this. I'm finding the shared.js
file in the assets
list.
WBT version 1.2.0
. webpack version: 4.46.0
, and multiple entrypoints configuration.
This is my output by adding the provided optimization
:
{
"status": "done",
"assets": {
"shared.js": {
"name": "shared.js",
"path": "/home/jota/PycharmProjects/django-webpack-loader/tests/assets/django_webpack_loader_bundles/shared.js",
"publicPath": "http://mywebsite.com/dist/shared.js"
},
"main.css": {
"name": "main.css",
"path": "/home/jota/PycharmProjects/django-webpack-loader/tests/assets/django_webpack_loader_bundles/main.css",
"publicPath": "http://mywebsite.com/dist/main.css"
},
"main.js": {
"name": "main.js",
"path": "/home/jota/PycharmProjects/django-webpack-loader/tests/assets/django_webpack_loader_bundles/main.js",
"publicPath": "http://mywebsite.com/dist/main.js"
},
"main2.js": {
"name": "main2.js",
"path": "/home/jota/PycharmProjects/django-webpack-loader/tests/assets/django_webpack_loader_bundles/main2.js",
"publicPath": "http://mywebsite.com/dist/main2.js"
}
},
"chunks": {
"main": [
"shared.js",
"main.css",
"main.js"
],
"main2": [
"shared.js",
"main2.js"
]
},
"publicPath": "http://mywebsite.com/dist/"
}
entry: { main: './assets/js/index', main2: './assets/js/index2' },
plugins: [
new MiniCssExtractPlugin(),
new BundleTracker({
path: __dirname,
filename: './webpack-stats.json',
publicPath: 'http://mywebsite.com/dist/'
}),
],
Am I missing something? If so, would you mind to us a more complete, reproducible example, or providing more info so we are able to reproduce and understand the issue?
from webpack-bundle-tracker.
I'm aggre with @joaopslins, it works. I think this a concern for django-webpack-loader.
Their example i think ...
Pre 1.2 you have to declare in django code each dependencies ex:
{% extends 'layout.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}
{% block cssheader %}
{% render_bundle 'shared' 'css' %}
{% render_bundle 'main' 'css' %}
{% render_bundle 'main2' 'css' %}
{% endblock %}
{% block container %}
<div class="row">
<div id="main"></div>
</div>
<div class="row">
<div id="main2"></div>
</div>
{% render_bundle 'shared' 'js' %}
{% render_bundle 'main' 'js' %}
{% render_bundle 'main2' 'js' %}
{% endblock %}
With >1.2 you only need to declare your chunk but tag for shared will be generated twice :
{% extends 'layout.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}
{% block cssheader %}
{% render_bundle 'main' 'css' %}
{% render_bundle 'main2' 'css' %}
{% endblock %}
{% block container %}
<div class="row">
<div id="main"></div>
</div>
<div class="row">
<div id="main2"></div>
</div>
{% render_bundle 'main' 'js' %}
{% render_bundle 'main2' 'js' %}
{% endblock %}
I think we could create and fix this issue in django-webpack-loader by checkin assets already loaded in page for a template. I have made a test case in draft PR. I would try to fix it week end.
from webpack-bundle-tracker.
@melck have you tried dependOn
+ optimization.runtimeChunk: 'single'
to create your own shared entrypoint? https://webpack.js.org/guides/code-splitting/#prevent-duplication
from webpack-bundle-tracker.
@fjsj No i haven't yet upgraded to webpack 5 and for my use cases, i never load more than 1 entrypoint per html page.
For me this use case shouldn't be fix, because it doesn't respect usage of webpack entrypoints. After saying that, its allowed by webpack and working, so we could at least try to warn when declaring multiple time same script in django but i don't know it it's possible. So I may close my PR without fix after trying a couple of hours.
from webpack-bundle-tracker.
Closing this, as django-webpack-loader and webpack-bundle-tracker are entrypoint-based (not chunk-based) since 1.0.0 and webpack 4.
If needed, for multiple entrypoints in a single template (not recommended), chunking should be controlled by the webpack config dependOn
: https://webpack.js.org/guides/code-splitting/#entry-dependencies
For the issue of multiple entrypoints in a single template generating duplicate common chunks (comments from @akx
and @mjtamlyn above), check this new open issue: django-webpack/django-webpack-loader#289
LMK if you think I understood something wrong.
from webpack-bundle-tracker.
Related Issues (20)
- Set output default indent to 2
- Need a woff2 format to be stored at bundle chunks HOT 15
- Setting "path" option no longer works HOT 4
- Losing data when `deleteOriginalAssets` is used in compression plugin HOT 2
- Error when updating to v1.0.0 HOT 1
- move tests to github actions? HOT 2
- @sentry/webpack-plugin deletefilesafterupload Breaks Build
- Optional chaining breaks compatibility with Node.js version 12 HOT 1
- ERR_REQUIRE_ESM Build failure after some other package in my app installed new strip-ansi HOT 6
- Missing assets section of webpack-stats in ci github action agent build HOT 3
- Integrity can only be used if the physical files exist HOT 1
- Implement Jazzband guidelines for webpack-bundle-tracker HOT 6
- TypeError [ERR_INVALID_ARG_TYPE] with Webpack 5 and relativePath: true HOT 3
- 1.0.0-alpha.1 version not generating webpack-stats.json file HOT 3
- NPM version
- Can't switch from NPM to yarn or the other way around
- Release 1.0.0 HOT 2
- Add CI to run automated tests HOT 1
- Issue when using BundleTracker for multiple webpack configuration HOT 1
- Double-check @types dependencies, some of then might not be used HOT 1
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 webpack-bundle-tracker.