Last active
June 26, 2022 22:18
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| // ... | |
| }, | |
| // ... | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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", | |
| }, | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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