@parabol/webpack-autodll-plugin

AutoDLL Webpack Plugin for handling DLL caching outside of webpack.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

AutoDLL Webpack Plugin for handling DLL caching outside of webpack.

You can use this Webpack plugin that includes DLL caching, to make your webpack builds as fast as HIGHLY optimized, and automatically based on your lockfile, e.g. yarn.lock

Before	After

(back to top)

Built With

• Webpack for scaffold
• Sucrase for compiling
  • todo: TypeScript
• Jest for testing
• Prettier for code format
  • lint-staged
  • simple-git-hooks
• semantic-release
  • auto generate CHANGELOG
  • auto publish to NPM
  • auto release in GitHub
• GitHub Action as CI to build & test & publish

(back to top)

Getting Started

Prerequisites

• Node.js
• NPM/Yarn

yarn add @parabol/webpack-autodll-plugin -D
# npm install @parabol/webpack-autodll-plugin -D

Webpack Usage

const path = require('path')
const WebpackAutodllPlugin = require('@parabol/webpack-autodll-plugin')

module.exports = {
  entry: './src/index.js',
  plugins: [
    new WebpackAutodllPlugin({
      vendors: ['react', 'react-dom', 'core-js'],
      // lockfile: 'yarn.lock',
      // package: 'package.json',
      // ignore: [],
    }),
  ],
}

For the real example, please check out the examples/ folder

cd examples/simple
yarn build
yarn build # <-- re-run it again to see the difference

rm -rf dev/dll && yarn build # clean dll cache and run it gain
rm -rf node_modules/.cache && rm -rf dev/dll && yarn build # clean all cache and run it again

(back to top)

Features & Roadmap

Please see the CHANGELOG for a full list of features.

• the buildDll.js logic is moved into a separate package & turned into a webpack plugin
• the package is open sourced under the parabolinc github and under the @parabol in npm
• instead of referencing the built dll output, the dev config references the dll config & the plugin builds it if the hash changes
  • see https://github.com/clinyong/dll-link-webpack-plugin for inspiration on the API
• API configuration: ({vendors: string[]} | {package: string, ignore?: string[]}) & {lockfile?: string}
  • vendors
  • lockfile
  • package
  • ignore

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

How to Develop

1.Clone the repo

git clone https://github.com/JimmyLv/webpack-autodll-plugin.git

2. Install NPM packages

yarn #or npm install

3. Try the webpack plugin in examples/simple folder

cd examples/simple
webpack

4. Or you can try to use jest to runWebpackExampleInMemory

yarn test

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

JimmyLv - @Jimmy_JingLv - jimmy.jinglv@gmail.com

Project Link: https://github.com/JimmyLv/webpack-autodll-plugin

(back to top)

Acknowledgments

• ParabolInc
• Matt Krick

(back to top)