Comments (4)
Based on my experience with code splitting for different single page and multi page apps, here's an idea on how it can be structured to be more applicable to a developer looking for info on code splitting (and the different types and reasons).
Note: Is CommonChunkPlugin
or the vendor chunk concept something that belongs with code splitting, or is this more specific to the concept of on-demand chunks and require.ensure
/System.import
?
Potential Outline
- Reasons for code splitting
- On-demand routing for Single Page Apps
- Improved development build times (only building changed chunks)
- Aggressive cacheability of long-lived/shared code (common/vendor chunk)
- On-demand chunks
- specific reasons/benefits (on-demand routing, complex/infrequent logic, authentication security)
- how to create one
- note that this happens in the source not in webpack configs
- examples
System.import
examplerequire.ensure
example- any other examples?
- live examples with available source code?
- show example network requests to convey the real concept? gif/video?
- Improving development build times (is this a thing?)
- some build time results with/without code splitting in dev mode when changing a file
- Vendor/commons chunking
- vendor vs commons chunk
- when to use each / both
- explicitly including vendor code (vendor chunk)
- how to know what to include (generated chunk logs)
- example config and chunk output
- automatically including common code (commons chunk)
- example config and chunk output
- configuration / tuning
- vendor vs commons chunk
from webpack.js.org.
Great outline and ideas! Thanks.
I can see there are bits like Improving development build times (is this a thing?)
that could easily become little articles of their own.
I've been prototyping an enhanced structure that would handle that through a "how to" style miniguide. In that structure this issue would map as "how to split code". Perhaps "how to load code on demand" would be another good split. Doing this would keep the articles short and focused.
Note: Is CommonChunkPlugin or the vendor chunk concept something that belongs with code splitting, or is this more specific to the concept of on-demand chunks and require.ensure/System.import?
It would be good to cover here as it comes up with vendor/commons chunking. That's how I do it in my book.
from webpack.js.org.
@bendman - How about info on ExtractTextPlugin here? It collects all the css chunks and puts them into a single file right?
from webpack.js.org.
@pksjce I feel like that should be linked to from code-splitting, but maybe discussed in detail on its own page or section with plugins. What about briefly discussing it here along the lines of "Code Splitting Non-JS Sources".
from webpack.js.org.
Related Issues (20)
- splitChunks maxSize/minSize/maxRequest priority HOT 1
- Document webpack change: feat: add warning for asyncModule
- Why `optimization.removeAvailableModules` is default to `false`?
- Update webpack-dev-server documentation HOT 1
- Document webpack change: feat: support css local ident name HOT 1
- Document webpack change: fix: use LZW to compress css head meta
- Document webpack change: fix: resolve's plugins types
- Document webpack change: feat: allow to customize the stage of BannerPlugin
- meta[name=theme-color]' is not supported by Firefox, Firefox for Android. HOT 1
- Document webpack change: feat(css): allow to use default and named export
- > It is already implemented, `webpack-cli init`, soon we will implement more templates HOT 2
- Document webpack change: feat: support `node:` prefix for Node.js core modules in runtime code
- Webpack 5 release announcement HOT 3
- Why does the example for the loader use ES modules? HOT 2
- webpack doesn't work if the project path contains an ! HOT 6
- Document webpack change: refactor: migrate on `acorn-import-attributes`
- Document webpack change: Add generator option for asset modules to explicitly keep source maps produced by loaders
- Document webpack change: feat: override strict for javascript module
- Imporve https://webpack.js.org/guides/package-exports/#alternatives
- Where to read more about app field in config 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.js.org.