webpack-assets-info-plugin v1.0.2

Webpack Assets Info Plugin

Webpack plugin for generating assets manifest, especially for async chunks generated by code splitting, includes each of the code splitting point source file path info associate with the emitted chunk file.

Install

npm install --save-dev webpack-assets-info-plugin

Usage

In your webpack configration file:

var AssetsInfoPlugin = require('webpack-assets-info-plugin');

module.exports = {
    // ...
    plugins: [
      new AssetsInfoPlugin()  // or new AssetsInfoPlugin({filename: 'my-assets.json'}) to specify the output json file name
    ]
};

This will generate a assets.json file in your root output directory with the information of each source file path to their corresponding output file, for example:

{
    "publicPath": "/",
    "entryScripts": [
        "assets/manifest.923ac3.js",
        "assets/vendor.d95735.js",
        "assets/main.7b59b7.js"
    ],
    "entryStyles": [
        "assets/main.ea4d18.css"
    ],
    "asyncChunks": [
        {
            "id": 0,
            "size": 68773,
            "hash": "14d27ca8b1ac4a6f64ff",
            "src": "./src/pages/path1/page1/index.js",
            "file": "assets/chunk/0.14d27c.js"
        },
        {
            "id": 1,
            "size": 67988,
            "hash": "5434d160d747ed7bb0b0",
            "src": "./src/pages/path2/page2/index.js",
            "file": "assets/1.5434d1.js"
        }
    ],
    "assets": [
        {
            "src": "./src/img/path1/img1.png",
            "file": "assets/img1.23dc2c.png",
            "size": 7764
        },
        {
            "src": "./src/img/path2/img2.png",
            "file": "assets/img2.2f357c.png",
            "size": 6633
        }
    ]
}

So, you can see that each item in the asyncChunks array in this generated json file contains the source file path info(the src field) of the emitted code splitting point chunk file(the file field). And you can use this to add a script tag in your HTML page file to load the async js file inadvance, and reduce the waterfall time, so that your SPA's first screen page can load and render more quickly!

License

MIT © Jiayang Shen