├── .gitignore
├── demo.png
├── example
├── components
│ └── hello.js
├── next.config.js
├── package.json
├── pages
│ └── index.js
├── readme.md
└── style.css
├── index.js
├── lib
└── asset-size-plugin.js
├── package.json
├── readme.md
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lucleray/next-size/d432ec04a3f5ed8bf335e376d1a0a351c44d6549/demo.png
--------------------------------------------------------------------------------
/example/components/hello.js:
--------------------------------------------------------------------------------
1 | export default () => Hello 👋
2 |
--------------------------------------------------------------------------------
/example/next.config.js:
--------------------------------------------------------------------------------
1 | const withSize = require('next-size')
2 | const withCss = require('@zeit/next-css')
3 |
4 | module.exports = withSize(withCss())
5 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "dev": "next",
4 | "build": "next build",
5 | "start": "next start"
6 | },
7 | "dependencies": {
8 | "@zeit/next-css": "^1.0.1",
9 | "next": "^7.0.2",
10 | "react": "^16.6.1",
11 | "react-dom": "^16.6.1"
12 | },
13 | "devDependencies": {
14 | "next-size": "latest"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/example/pages/index.js:
--------------------------------------------------------------------------------
1 | import dynamic from 'next/dynamic'
2 | import '../style.css'
3 |
4 | const DynamicComponent = dynamic(
5 | import(/* webpackChunkName: 'hello-component' */ '../components/hello')
6 | )
7 |
8 | export default () => (
9 |
10 |
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/example/readme.md:
--------------------------------------------------------------------------------
1 | ### `next` + `next-size`
2 |
3 | #### If you want to try this example yourself:
4 |
5 | 1. Install deps with `yarn`
6 |
7 | 2. Build the project with `yarn build`
8 |
9 | #### If you want to see the configuration file: [see next.config.js](next.config.js)
10 |
--------------------------------------------------------------------------------
/example/style.css:
--------------------------------------------------------------------------------
1 | .example {
2 | font-size: 50px;
3 | }
4 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const AssetSizePlugin = require('./lib/asset-size-plugin')
2 |
3 | module.exports = ({ webpack = config => config, ...nextConfig } = {}) => ({
4 | // pass nextConfig
5 | ...nextConfig,
6 |
7 | // overwrite webpack config
8 | webpack: (config, options) => {
9 | const { dev, isServer, buildId, config: { distDir } = {} } = options
10 |
11 | if (!dev && !isServer) {
12 | config.plugins.push(
13 | new AssetSizePlugin(
14 | {
15 | buildId,
16 | distDir
17 | },
18 | nextConfig.size || {}
19 | )
20 | )
21 |
22 | if (config.output.futureEmitAssets) {
23 | // next v8 uses `futureEmitAssets` which deactivates asset.size()
24 | // so we disable it when using this plugin
25 | config.output.futureEmitAssets = false
26 | }
27 | }
28 |
29 | return webpack(config, options)
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/lib/asset-size-plugin.js:
--------------------------------------------------------------------------------
1 | const { gzip: _gzip } = require('zlib')
2 | const { relative: pathRelative } = require('path')
3 | const { promisify } = require('util')
4 | const chalk = require('chalk')
5 | const {
6 | IS_BUNDLED_PAGE_REGEX,
7 | BUILD_MANIFEST,
8 | REACT_LOADABLE_MANIFEST,
9 | CLIENT_STATIC_FILES_PATH
10 | } = require('next/constants')
11 |
12 | const gzip = promisify(_gzip)
13 |
14 | const UNITS = ['B', 'kB', 'MB']
15 | const prettyBytes = number => {
16 | const exponent = Math.min(
17 | Math.floor(Math.log10(number) / 3),
18 | UNITS.length - 1
19 | )
20 | number = Number((number / Math.pow(1000, exponent)).toPrecision(3))
21 | const unit = UNITS[exponent]
22 | return number + ' ' + unit
23 | }
24 |
25 | const color = size =>
26 | size > 100 * 1024
27 | ? 'red'
28 | : size > 40 * 1024
29 | ? 'yellow'
30 | : size > 10 * 1024
31 | ? 'cyan'
32 | : 'green'
33 |
34 | const filterFiles = filename => {
35 | // filter .map files
36 | if (filename.endsWith('.map')) {
37 | return false
38 | }
39 |
40 | // filter loadable manifest, build manifest
41 | return filename !== REACT_LOADABLE_MANIFEST && filename !== BUILD_MANIFEST
42 | }
43 |
44 | class AssetsSizePlugin {
45 | constructor({ buildId, distDir }, { printRawSize = false } = {}) {
46 | this.buildId = buildId
47 | this.distDir = distDir ? pathRelative(process.cwd(), distDir) + '/' : ''
48 | this.printRawSize = printRawSize
49 | }
50 |
51 | formatFilename(rawFilename) {
52 | let filename = rawFilename
53 |
54 | // dim static folder
55 | if (filename.indexOf(CLIENT_STATIC_FILES_PATH) === 0) {
56 | filename = filename.replace(
57 | CLIENT_STATIC_FILES_PATH + '/',
58 | chalk.gray(CLIENT_STATIC_FILES_PATH + '/')
59 | )
60 | }
61 |
62 | // add distDir
63 | filename = chalk.gray(this.distDir) + filename
64 |
65 | // shorten buildId
66 | if (this.buildId) {
67 | filename = filename.replace(
68 | this.buildId + '/',
69 | chalk.gray(this.buildId.substring(0, 4) + '****/')
70 | )
71 | }
72 |
73 | // shorten hashes
74 | filename = filename.replace(
75 | /(.*[-.])([0-9a-f]{8,})((\.chunk)?(\.js|\.css))/,
76 | (_, c1, hash, c2) => c1 + chalk.gray(hash.substring(0, 4) + '****') + c2
77 | )
78 |
79 | return filename
80 | }
81 |
82 | async printAssetsSize(assets) {
83 | const sizes = await Promise.all(
84 | Object.keys(assets)
85 | .filter(filterFiles)
86 | .sort((a, b) => {
87 | // put pages at the top, then the rest
88 | const [pa, pb] = [a, b].map(x => IS_BUNDLED_PAGE_REGEX.exec(x))
89 | if (pa && !pb) return -1
90 | if (pb && !pa) return 1
91 | if (a > b) return 1
92 | return -1
93 | })
94 | .map(async filename => {
95 | const asset = assets[filename]
96 | const size = this.printRawSize
97 | ? asset.source().length
98 | : (await gzip(asset.source())).length
99 |
100 | return {
101 | filename,
102 | size,
103 | prettySize: prettyBytes(size)
104 | }
105 | })
106 | )
107 |
108 | // find longest prettySize string size
109 | const longestPrettySize = Math.max(
110 | ...sizes.map(({ prettySize }) => prettySize.length)
111 | )
112 |
113 | let message = this.printRawSize
114 | ? '\nBrowser assets sizes:\n\n'
115 | : '\nBrowser assets sizes after gzip:\n\n'
116 |
117 | for (let { filename, size, prettySize } of sizes) {
118 | const padding = ' '.repeat(longestPrettySize - prettySize.length)
119 | const formattedSize = chalk[color(size)].bold(prettySize)
120 | const formattedFilename = this.formatFilename(filename)
121 |
122 | message += ` ${padding}${formattedSize} ${formattedFilename}\n`
123 | }
124 |
125 | // eslint-disable-next-line
126 | console.log(message)
127 | }
128 |
129 | async apply(compiler) {
130 | compiler.hooks.afterEmit.tapPromise('AssetsSizePlugin', compilation =>
131 | // eslint-disable-next-line
132 | this.printAssetsSize(compilation.assets).catch(console.error)
133 | )
134 | }
135 | }
136 |
137 | module.exports = AssetsSizePlugin
138 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-size",
3 | "version": "2.1.0",
4 | "main": "index.js",
5 | "license": "MIT",
6 | "author": "lucleray",
7 | "files": [
8 | "index.js",
9 | "lib"
10 | ],
11 | "dependencies": {
12 | "chalk": "^2.4.2"
13 | },
14 | "peerDependencies": {
15 | "next": ">=6"
16 | },
17 | "devDependencies": {
18 | "babel-eslint": "^10.0.1",
19 | "eslint": "^5.16.0",
20 | "eslint-config-prettier": "^6.0.0",
21 | "husky": "^2.7.0",
22 | "lint-staged": "^9.2.0",
23 | "next": "^8.1.0",
24 | "prettier": "^1.18.2"
25 | },
26 | "prettier": {
27 | "singleQuote": true,
28 | "semi": false
29 | },
30 | "eslintConfig": {
31 | "parser": "babel-eslint",
32 | "env": {
33 | "es6": true,
34 | "node": true
35 | },
36 | "extends": [
37 | "eslint:recommended",
38 | "prettier"
39 | ]
40 | },
41 | "husky": {
42 | "hooks": {
43 | "pre-commit": "lint-staged"
44 | }
45 | },
46 | "lint-staged": {
47 | "*.js": [
48 | "prettier --write",
49 | "eslint",
50 | "git add"
51 | ],
52 | "*.md": [
53 | "prettier --write",
54 | "git add"
55 | ]
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | > ⚠️ This package has been deprecated because it can slow down your builds. Upgrade to Next.js 9+ to get [Build Output Statistics](https://nextjs.org/blog/next-9#build-output-statistics) out-of-the-box.
2 |
3 | # next-size
4 |
5 | **Next-size** is a next.js plugin to **print browser assets sizes** when running `next build`.
6 |
7 |
8 |
9 |