webpack-content-chunks
A solution for adding webpack content chunks to the server response.
TOC
Installation
npm install webpack-content-chunks --save
Use Case
You already have an universal (isomorphic) app with server side rendering, routing, and code splitting using webpack. To avoid unnecessary round trips you want to optimize and include all content chunks to the server response.
Example
This is not a fully functional example and serves as a demonstration of the
concept. It uses ES6 (webpack2), but would work with require
, and require.ensure
as well.
;; const stats = JSON; { const contentChunks = stats; ; ; const chunks = contentChunks ; res;} { } { }
How it works
webpack-content-chunks uses webpack stats to gather information about existing
chunks. It then groups content chunks originating from the same line of code together
as a single code split
.
Troubleshooting
stats.json
Where to get Use the webpack-stats-plugin. We recommend the following config:
filename: "stats.json" fields: "chunks" { const result = chunks: ; for const c of datachunks const entry = files: cfiles origins: ; for const origin of corigins delete originmodule; delete originmoduleIdentifier; entryorigins; resultchunks; return JSON; }
If you are using the webpack-dev-middleware
follow this instruction.
stats.json
is huge!
My Use webpack-stats-plugin see where to get stats.json.
__filename
always returns /index.js
It seems you are using webpack for you server side code. In this case
you need to tell webpack to passthrough __filename
.
node: __filename: true
API Reference
WebpackContentChunks
A class for adding content chunks and retrieving files from added chunks.
constructor(stats: Object)
Parameters
stats
: Object - Webpack stats.
addChunksFrom(moduleName: string, codeSplit: number)
Adds all content chunks that originated from the nth-codesplit in given module.
Parameters
moduleName
: string - Name of module, can be obtained using node's __filename feature.codeSplit
: number - Defines nth-codesplit starting at 0.
getFiles(): Array<string>
Returns an array of files from added chunks.
Returns: Array<string> - Array of files.
reset()
Resets instance as if no chunks has been added.
Contributions
Contributions welcome! Make sure to pass $ npm run test
and run $ npm run docs
when your changes affects the documentation.