https://github.com/petrhanak/webpack-dll-plugin-guide
Guide how to setup webpack dll plugin on your project
https://github.com/petrhanak/webpack-dll-plugin-guide
dllplugin optimization vendors webpack
Last synced: about 1 month ago
JSON representation
Guide how to setup webpack dll plugin on your project
- Host: GitHub
- URL: https://github.com/petrhanak/webpack-dll-plugin-guide
- Owner: petrhanak
- Created: 2017-03-21T14:42:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T17:33:50.000Z (over 9 years ago)
- Last Synced: 2025-07-22T08:50:16.234Z (11 months ago)
- Topics: dllplugin, optimization, vendors, webpack
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack DllPlugin
## What is it and why should i care
TL;DR: split build, faster rebuild
> Webpack's Dll and DllReference plugins are a way to split a large JavaScript project into multiple bundles which can be compiled independently. They can be used to optimize build times (both full and incremental) and improve caching for users by putting code which changes infrequently into separate "library" bundles. The term 'Dll' is short for Dynamically Linked Library which is a feature for native Windows applications that solves the same problem.
>
> more info: https://robertknight.github.io/posts/webpack-dll-plugins/
## How to do it
### Vendor config
Desired config `entry` should look like this:
`~/webpack/vendor.config.json`
```javascript
module.exports = {
entry: [
"lodash",
"moment",
"react",
"react-dom"
]
//...
}
```
To keep things clean create separate file which exports array of vendor libraries - either `js` or `json`.
`~/webpack/vendors.json`
```json
[
"lodash",
"moment",
"react",
"react-dom"
]
```
And copy-paste [vendor config](webpack/vendor.config.js)
### Client config
Just add following plugin into webpack
```javascript
new webpack.DllReferencePlugin({
context: '.',
manifest: require('../.build/vendor/vendor-manifest.json'),
})
```
### Automatic build
add build command in `package.json`
```
webpack --config webpack/vendor.config.js
```