-
-
Save juukie/11f9dfeee4118a6e10680beb9664442a 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 hidden or 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 hidden or 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 hidden or 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 hidden or 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