Comments (3)
Great question, @cgatian
To be honest, I wasn't aware of webpack-dll-bundle-plugin when I wrote this one.
AutoDLL started as a humble PR for adding DLL support in create-react-app (CRA).
I intended to do so without adding more complexity to project.
That PR went over many iterations before I realized one day that the best way to do so is to encapsulate the entire logic into a Plugin. After doing so, I noticed there's nothing specific to CRA about it anymore and that other projects can benefit from it too.
So I extracted AutoDLL into its own repo.
Key differences
First, I must say that I have very little experience with webpack-dll-bundles-plugin,
So please correct me if you find any mistake in my notes.
Cache dir
DllBundles asks you to specify its cache directory, which is also its output folder.
It is where it stores both the DLLs and its invalidation logic (the dll-bundles-state.json
file).
AutoDLL hides that away from you and uses find-cache-dir to stores its cache inside node_modules/.cache
That has the benefit of automaticity invalidating the cache every time npm install
, remove
, or update
in called since the .cache
dir gets delete when you use one of those.
Webpack's dev-server support
DllBundles seems to create the DLLs in your project also when you use the dev-server.
One of webpack's dev-server features is that it stores the assets in the memory instead for faster access, and allows you to access them as if the were just regular files.
AutoDLL respects that and when the devServer is used, the DLLs are added to the memory as well.
Filename templates
Seems like DllBundles doesn't allow to change the DLL's filename, and to get it you have to use an external API like so:
new AddAssetHtmlPlugin([
{ filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
{ filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
])
AutoDLL handles it differently.
First, you can use any valid webpack filename template, by using the filename
option:
new AutoDllPlugin({
path: './dll',
filename: '[name].dll.js'
entry: {
vendor: [ ... ]
},
...
})
Then in the HTML you can use:
<script src="/dll/vendor.dll.js"></script>
You might also want to use a filename template like so: [name]_[hash].js
,
and since the hash
part is unpredictable, you have to inject the DLL bundle's path into the HTML dynamically.
That's why AutoDLL recommends using the HtmlPlugin
And by specifying inject: true
, AutoDLL will inject the bundle's path for you
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: './src/index.html',
}),
new AutoDllPlugin({
inject: true, // ⟸
context: __dirname,
filename: '[name]_[hash].js',
path: './dll',
entry: {
vendor: [
'react',
'react-dom',
'moment'
]
}
})
]
Will result in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="/dll/vendor.dll.js"></script>
<script src="/main.bundle.js"></script>
</body>
</html>
Invalidation
If I understood correctly, DllBundles checks the contents of each module's package.json
AutoDLL currently have to two conditions for invalidation
- The existence of the .cache directory, as explained before.
- If the current settings passed into the plugin are different from last time.
There's also a very exciting PR on the way, which will allow any change to be detected.
For examples, you'll be able to add conosle.log
in node_modules/angular
and it will trigger a build on next run.
Test
Currently, I don't see tests in DllBundles.
AutoDLL designed to be testable from the ground up, I believe it's essential for the project's stability.
Documantaion
Although it's still much a WIP, I believe in having great documentation with many examples and FAQ.
I intend AutoDLL to the have that.
from autodll-webpack-plugin.
Wow, thank you @asfktz for the in depth comparison!
I look forward to integrating this into our project, once some of the bumps are cleaned up. Thank you again. 🙏
from autodll-webpack-plugin.
You're welcome, @cgatian 😊
from autodll-webpack-plugin.
Related Issues (20)
- 'Is valid cache' is aways false
- How to DevExpress to DLL? HOT 3
- got error when use dynamic import
- Only updating package produces wrong broken dll-links when using chunkhashes
- AutoDLL not working in NextJS HOT 1
- webpack4中每次修改app.js时dll会重新打包 HOT 1
- I use this plugin for react-app,it wiil not inject to the html HOT 1
- TypeError: Cannot read property 'properties' of undefined HOT 1
- multiple dll packages are generated, it will cause duplicate references HOT 2
- Is it support css dll?
- ModuleNotFoundError with Webpack 4
- stats.json are too big HOT 1
- How do I set entryOnly to true to enable treeshaking?
- Plugins are not run when cache is valid
- Autodll-webpack-plugin specifying node_modules in different projects
- what is the right context for a monorepo setup?
- inject the DLL bundles into the html fail HOT 5
- add path parameter html script src can add /
- Cannot add property autodllStatsRetrieved, object is not extensible HOT 3
- how to use this plugin with create-react-app & craco ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autodll-webpack-plugin.