Skip to content

Instantly share code, notes, and snippets.

@MoOx
Last active June 26, 2022 22:18
Show Gist options
  • Save MoOx/64ff089e3d0ed0a48705cf330eb20111 to your computer and use it in GitHub Desktop.
Save MoOx/64ff089e3d0ed0a48705cf330eb20111 to your computer and use it in GitHub Desktop.
Boost your Webpack performance with DLLPlugin (will bundle as dll all your "dependencies", see comment in package.json)
{
"private": true,
// ...
"#dependencies": "dependencies are the one shipped to the client",
"dependencies": {
"babel-polyfill": "^6.7.4",
"react": "^15.0.0",
// ...
"whatwg-fetch": "^0.11.1"
},
"devDependencies": {
// ...
"webpack": "^2.1.0-beta.13",
"webpack-dev-server": "^2.1.0-beta",
"webpack-notifier": "^1.3.0"
},
"scripts": {
"dll": "webpack --config webpack.dll.config.babel.js",
"postinstall": "npm -s run dll",
"dev-server": "webpack-dev-server --open --env.dll",
"start": "npm -s run dev-server"
// ...
},
// ...
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- ... -->
<% for (var chunk in htmlWebpackPlugin.options.externals) { %><script src="<%=htmlWebpackPlugin.options.externals[chunk] %>"></script><% } %>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>
</body>
</html>
import { join } from "path"
import {
HotModuleReplacementPlugin,
DllReferencePlugin,
} from "webpack"
import WebpackNotifierPlugin from "webpack-notifier"
import HtmlWebpackPlugin from "html-webpack-plugin"
const defaultEnv = {
production: process.env.NODE_ENV === "production",
dev: !process.env.NODE_ENV || process.env.NODE_ENV === "",
test: process.env.NODE_ENV === "test",
}
export default (env) => {
env = {
...defaultEnv,
...env,
}
return {
module: {
loaders: [
// ...
],
},
plugins: [
new HtmlWebpackPlugin({
template: join(__dirname, "entry", "index.html"),
inject: false,
...env.dll && {
externals: [ "/dependencies.dll.js" ],
},
}),
...env.dev ? [
new WebpackNotifierPlugin(),
new HotModuleReplacementPlugin(),
] : [],
...env.dll ? [
new DllReferencePlugin({
context: __dirname,
// generated by webpack.dll.config.babel.js
manifest: require("./dist/dependencies.dll.manifest.json"),
// name: "./dist/dependencies.dll.js",
}),
] : [],
],
entry: {
// ...
},
output: {
// publicPath has to be defined so HtmlWebpackPlugin serve correct js
// in script tags
// (because historyApiFallback will root things like /a/b to the
// index.html, and script tag need a absolute url for the script)
publicPath: "/",
path: "dist",
filename: "[name].[hash].js",
},
devServer: {
// when you serve static files during development, this is necessary
// eg: dependencies.dll.js
contentBase: "dist",
},
}
}
import path from "path"
import webpack from "webpack"
import pkg from "./package.json"
const outputPath = path.join(__dirname, "dist")
module.exports = {
context: process.cwd(),
entry: {
dependencies: Object.keys(pkg.dependencies),
},
output: {
filename: "[name].dll.js",
path: outputPath,
library: "[name]",
},
plugins: [
new webpack.DllPlugin({
context: __dirname,
name: "[name]",
path: path.join(outputPath, "[name].dll.manifest.json"),
}),
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment