webpack-split-chunks

Improving build speed and giving more control over chunk splitting

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
webpack-split-chunks
1300.2.17 years ago8 years agoMinified + gzip package size for webpack-split-chunks in KB

Readme

Webpack split chunks plugin   Build Status
This plugin transfers modules whose absolute path matches your condition from a list of chunks into a single target chunk.

Benefits

Using this on external bundles can increase dev re-builds performance and optimize clients browser cache in production, because it includes a lot of modules that you have no intention of changing.

Usage

// webpack.config.js
const webpack = require('webpack');
const ChunksPlugin = require('webpack-split-chunks');

module.exports = {
    entry: {
        bundle: './src',
    },
    output: {
        path: './build'
    },
    plugins: [
        new ChunksPlugin({
            to: 'vendor',
            test: /node_modules/ // or an array of regex
        })
    ]
};
With this configuration all the modules that were require'd in the bundle chunk whose absolute path contains the substring "node_modules" would be instead added to the vendor chunk – and not into the bundle chunk where they would otherwise be.

Webpack 2.x and 1.x compatibility

The latest version of this plugin is capable with Webpack@^2.0.0 and Webpack@^1.5.0.
Earlier versions of Webpack are not supported anymore.

API

new ChunksPlugin(options)

options: Object (required)
  • from: string | Array[string] (optional)
Specifies name(s) of chunks which will be processed.
If omitted, all chunks will be processed.
> Note: omit this param if you want `webpack-split-chunks` to process your AMD-defined chunks
  • to: string (required)
The name of target chunk.
  • test: Function | RegExp | Array[RegExp] (required)
The chunks whose **absolute path** meets any of regexp will be moved to target chunk.

You can provide your own tester function, every module will be applied to it.
```
  test: (resource, module) => boolean
```
Where:
* **resource**: `string`<br/>
The absolute path to module

* **module**: `Object`<br/>
Webpack's [`Module`](https://github.com/webpack/webpack/blob/master/lib/Module.js) object with module meta-info

Examples

Search for multiple path masks and combine into single chunk
new ChunksPlugin({
    to: 'vendor',
    test: /node_modules|bower_components/
//        or
    test: [/node_modules/, /bower_components/]
})
Move all modules bigger than 10KB to large-chunk.js
new ChunksPlugin({
    to: 'large-chunk',
    test(path, module) {
        const source = source
        if(source) {
            const size = Buffer.byteLength(source)
            return size > 10 * 1024 * 8
        }
    }
})
Provide specific chunks/entries to extract from
module.exports = {
    entry: {
        portal: './src',
        admin: './src/admin',
        app: './src/app'
    },
    output: {
        path: './build'
    },
    plugins: [
        new ChunksPlugin({
            from: ['portal', 'admin']
            to: 'vendor',
            test: /node_modules/ // or an array of regex
        })
    ]
};

License

ISC