Skip to content
This repository has been archived by the owner on May 15, 2023. It is now read-only.

Commit

Permalink
Inline the webpack runtime
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamakulov
iamakulov committed Jan 30, 2018
1 parent d45f534 commit d71db76
Show file tree
Hide file tree
Showing 3 changed files with 21 additions and 2 deletions.
17 changes: 15 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Expand Up @@ -12,6 +12,7 @@
"dependencies": {
"babel-polyfill": "^6.26.0",
"hash-router": "^0.4.0",
"html-webpack-inline-chunk-plugin": "^1.1.1",
"moment": "^2.19.3",
"moment-locales-webpack-plugin": "^1.0.2",
"unfetch": "^3.0.0"
Expand Down
5 changes: 5 additions & 0 deletions webpack.config.js
View file
Expand Up @@ -13,6 +13,7 @@

const path = require('path');
const webpack = require('webpack');
const InlineChunkWebpackPlugin = require('html-webpack-inline-chunk-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
Expand Down Expand Up @@ -99,6 +100,10 @@ module.exports = {
name: 'runtime',
minChunks: Infinity,
}),
// Inline the webpack’s runtime
new InlineChunkWebpackPlugin({
inlineChunks: ['runtime'],
}),
]
: [
// Force writing the HTML files to disk when running in the development mode
Expand Down

1 comment on commit d71db76

@iamakulov
Copy link
Contributor Author

@iamakulov iamakulov commented on d71db76 Jan 30, 2018 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit makes webpack inline the runtime into the HTML pages using html-webpack-inline-chunk-plugin. This prevents us from making an extra HTML request to load the small runtime. Corresponding article section

Note: the runtime is inlined, but runtime.js is still generated. If you don’t like this, just remove it using e.g. clean-webpack-plugin.

html-webpack-inline-chunk-plugin is a third-party package – so if you switched to this commit from elsewhere, you’ll likely want to run npm install.

Generated files
Before:

runtime.e6e6dbc8636f21ac4610.js · 1.42 kB
vendor.affc614bbe6166cee297.js  · 144 kB
main.dbd723a68f0cea08d30d.js    · 10.5 kB
src/users/index.html            · 600 bytes
src/index.html                  · 874 bytes

After:

runtime.e6e6dbc8636f21ac4610.js · 1.42 kB
vendor.affc614bbe6166cee297.js  · 144 kB
main.dbd723a68f0cea08d30d.js    · 10.5 kB
src/users/index.html            · 1.98 kB
src/index.html                  · 2.25 kB

The .html files increased in size because runtime.js is now inlined into them.

Please sign in to comment.