Reduce Install Size (#8788)
* Reduce Install Size This should shave a decent amount off our install size. * Fix CSS source map emitting * Fix generation * Enable source maps for testing purposes * Disable double comment * Fix test regex
This commit is contained in:
Joe Haddad
GitHub
parent
fdd5f7391e
commit
b4d349e6c1
7 changed files with 113 additions and 29 deletions
|
|
@ -1,7 +1,6 @@
|
|||
import crypto from 'crypto'
|
||||
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
|
||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
|
||||
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
|
||||
import path from 'path'
|
||||
// @ts-ignore: Currently missing types
|
||||
import PnpWebpackPlugin from 'pnp-webpack-plugin'
|
||||
|
|
@ -27,6 +26,7 @@ import { WebpackEntrypoints } from './entries'
|
|||
import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
|
||||
import { ChunkGraphPlugin } from './webpack/plugins/chunk-graph-plugin'
|
||||
import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
|
||||
import { CssMinimizerPlugin } from './webpack/plugins/css-minimizer-plugin'
|
||||
import { importAutoDllPlugin } from './webpack/plugins/dll-import'
|
||||
import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
|
||||
import NextEsmPlugin from './webpack/plugins/next-esm-plugin'
|
||||
|
|
@ -440,15 +440,15 @@ export default async function getBaseWebpackConfig(
|
|||
}),
|
||||
// Minify CSS
|
||||
config.experimental.css &&
|
||||
new OptimizeCssAssetsPlugin({
|
||||
cssProcessorOptions: {
|
||||
new CssMinimizerPlugin({
|
||||
postcssOptions: {
|
||||
map: {
|
||||
// `inline: false` generates the source map in a separate file.
|
||||
// Otherwise, the CSS file is needlessly large.
|
||||
inline: false,
|
||||
// `annotation: true` appends the `sourceMappingURL` to the end
|
||||
// of the CSS file for DevTools to find them.
|
||||
annotation: true,
|
||||
// `annotation: false` skips appending the `sourceMappingURL`
|
||||
// to the end of the CSS file. Webpack already handles this.
|
||||
annotation: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
|
|
|||
67
packages/next/build/webpack/plugins/css-minimizer-plugin.ts
Normal file
67
packages/next/build/webpack/plugins/css-minimizer-plugin.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { process as minify } from 'cssnano-simple'
|
||||
import webpack from 'webpack'
|
||||
import { RawSource, SourceMapSource } from 'webpack-sources'
|
||||
|
||||
// https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/0a410a9bf28c7b0e81a3470a13748e68ca2f50aa/src/index.js#L20
|
||||
const CSS_REGEX = /\.css(\?.*)?$/i
|
||||
|
||||
type CssMinimizerPluginOptions = {
|
||||
postcssOptions: {
|
||||
map: false | { prev?: string | false; inline: boolean; annotation: boolean }
|
||||
}
|
||||
}
|
||||
|
||||
export class CssMinimizerPlugin {
|
||||
private options: CssMinimizerPluginOptions
|
||||
|
||||
constructor(options: CssMinimizerPluginOptions) {
|
||||
this.options = options
|
||||
}
|
||||
|
||||
apply(compiler: webpack.Compiler) {
|
||||
compiler.hooks.compilation.tap('CssMinimizerPlugin', compilation => {
|
||||
compilation.hooks.optimizeChunkAssets.tapPromise(
|
||||
'CssMinimizerPlugin',
|
||||
chunks =>
|
||||
Promise.all(
|
||||
chunks
|
||||
.reduce(
|
||||
(acc, chunk) => acc.concat(chunk.files || []),
|
||||
[] as string[]
|
||||
)
|
||||
.filter(entry => CSS_REGEX.test(entry))
|
||||
.map(file => {
|
||||
const postcssOptions = {
|
||||
...this.options.postcssOptions,
|
||||
to: file,
|
||||
from: file,
|
||||
}
|
||||
|
||||
const asset = compilation.assets[file]
|
||||
|
||||
let input: string
|
||||
if (postcssOptions.map && asset.sourceAndMap) {
|
||||
const { source, map } = asset.sourceAndMap()
|
||||
input = source
|
||||
postcssOptions.map.prev = map ? map : false
|
||||
} else {
|
||||
input = asset.source()
|
||||
}
|
||||
|
||||
return minify(input, postcssOptions).then(res => {
|
||||
if (res.map) {
|
||||
compilation.assets[file] = new SourceMapSource(
|
||||
res.css,
|
||||
file,
|
||||
res.map.toJSON()
|
||||
)
|
||||
} else {
|
||||
compilation.assets[file] = new RawSource(res.css)
|
||||
}
|
||||
})
|
||||
})
|
||||
)
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -85,6 +85,7 @@
|
|||
"content-type": "1.0.4",
|
||||
"cookie": "0.4.0",
|
||||
"css-loader": "3.2.0",
|
||||
"cssnano-simple": "1.0.0",
|
||||
"devalue": "2.0.0",
|
||||
"etag": "1.8.1",
|
||||
"file-loader": "4.2.0",
|
||||
|
|
@ -99,7 +100,6 @@
|
|||
"mini-css-extract-plugin": "0.8.0",
|
||||
"mkdirp": "0.5.1",
|
||||
"node-fetch": "2.6.0",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.3",
|
||||
"ora": "3.4.0",
|
||||
"path-to-regexp": "2.1.0",
|
||||
"pnp-webpack-plugin": "1.5.0",
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
"webpack": "4.39.0",
|
||||
"webpack-dev-middleware": "3.7.0",
|
||||
"webpack-hot-middleware": "2.25.0",
|
||||
"webpack-sources": "1.3.0"
|
||||
"webpack-sources": "1.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.6.0",
|
||||
|
|
@ -154,7 +154,6 @@
|
|||
"@types/mkdirp": "0.5.2",
|
||||
"@types/nanoid": "2.0.0",
|
||||
"@types/node-fetch": "2.3.4",
|
||||
"@types/optimize-css-assets-webpack-plugin": "5.0.0",
|
||||
"@types/react": "16.8.18",
|
||||
"@types/react-dom": "16.8.4",
|
||||
"@types/react-is": "16.7.1",
|
||||
|
|
|
|||
6
packages/next/types/misc.d.ts
vendored
6
packages/next/types/misc.d.ts
vendored
|
|
@ -4,6 +4,12 @@ declare module 'unfetch'
|
|||
declare module 'styled-jsx/server'
|
||||
declare module 'async-retry'
|
||||
|
||||
declare module 'cssnano-simple' {
|
||||
import { Plugin } from 'postcss'
|
||||
const cssnanoSimple: Plugin<{}>
|
||||
export = cssnanoSimple
|
||||
}
|
||||
|
||||
declare module 'next/dist/compiled/nanoid/index.js' {
|
||||
function nanoid(size?: number): string
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,9 @@ module.exports = {
|
|||
// Make sure entries are not getting disposed.
|
||||
maxInactiveAge: 1000 * 60 * 60
|
||||
},
|
||||
experimental: { css: true, granularChunks: true }
|
||||
experimental: { css: true, granularChunks: true },
|
||||
webpack (cfg) {
|
||||
cfg.devtool = 'source-map'
|
||||
return cfg
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ describe('CSS Support', () => {
|
|||
)
|
||||
|
||||
// Contains a source map
|
||||
expect(cssContent).toMatch(/\/\*# sourceMappingURL=(.+\.map) \*\//)
|
||||
expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
|
||||
})
|
||||
|
||||
it(`should've emitted a source map`, async () => {
|
||||
|
|
|
|||
44
yarn.lock
44
yarn.lock
|
|
@ -2260,13 +2260,6 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.8.tgz#e469b4bf9d1c9832aee4907ba8a051494357c12c"
|
||||
integrity sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==
|
||||
|
||||
"@types/optimize-css-assets-webpack-plugin@5.0.0":
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.0.tgz#e2b02fbc9818b1e0968ef39b15c7eab206550211"
|
||||
integrity sha512-vuMwKpwiIYH15IW0k9oKBGsYi+OVYapBHUTYNuzzObGo9q+kd2SH4glqlM5vY6CTCFp9Pd0+hGyAYwSN1SFTCw==
|
||||
dependencies:
|
||||
"@types/webpack" "*"
|
||||
|
||||
"@types/ora@3.2.0":
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/ora/-/ora-3.2.0.tgz#b2f65d1283a8f36d8b0f9ee767e0732a2f429362"
|
||||
|
|
@ -4928,6 +4921,21 @@ cssnano-preset-default@^4.0.7:
|
|||
postcss-svgo "^4.0.2"
|
||||
postcss-unique-selectors "^4.0.1"
|
||||
|
||||
cssnano-preset-simple@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.0.0.tgz#8d231a0e56e39d4246633fe25ac001ea608f0436"
|
||||
integrity sha512-102bKOr+fpjBLPWHCB8/4MAtVFmaWd7J/O7UJ7UqU8vFtSMV72eoYXxDDiX/mxZRgZ77LhsmDbvrAtd1fmwimw==
|
||||
dependencies:
|
||||
postcss "^7.0.18"
|
||||
|
||||
cssnano-simple@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.0.0.tgz#a9322f7f4c192fad29c6d48afcb7927a9c5c597b"
|
||||
integrity sha512-B7u9vvtXEqeU2rzdt+Kfw5O9Nd46R7KNjJoP7Y5lGQs6c7n1Et5Ilofh2W9OjBV/ZiJV5+7j9ShWgiYNtH/57A==
|
||||
dependencies:
|
||||
cssnano-preset-simple "^1.0.0"
|
||||
postcss "^7.0.18"
|
||||
|
||||
cssnano-util-get-arguments@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
|
||||
|
|
@ -4950,7 +4958,7 @@ cssnano-util-same-parent@^4.0.0:
|
|||
resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
|
||||
integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
|
||||
|
||||
cssnano@^4.1.0, cssnano@^4.1.10:
|
||||
cssnano@^4.1.0:
|
||||
version "4.1.10"
|
||||
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
|
||||
integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
|
||||
|
|
@ -10392,14 +10400,6 @@ optimist@^0.6.1:
|
|||
minimist "~0.0.1"
|
||||
wordwrap "~0.0.2"
|
||||
|
||||
optimize-css-assets-webpack-plugin@5.0.3:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
|
||||
integrity sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==
|
||||
dependencies:
|
||||
cssnano "^4.1.10"
|
||||
last-call-webpack-plugin "^3.0.0"
|
||||
|
||||
optimize-css-assets-webpack-plugin@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.1.tgz#9eb500711d35165b45e7fd60ba2df40cb3eb9159"
|
||||
|
|
@ -11718,7 +11718,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.5:
|
|||
source-map "^0.6.1"
|
||||
supports-color "^6.1.0"
|
||||
|
||||
postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.6:
|
||||
postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.6:
|
||||
version "7.0.18"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.18.tgz#4b9cda95ae6c069c67a4d933029eddd4838ac233"
|
||||
integrity sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==
|
||||
|
|
@ -14777,7 +14777,15 @@ webpack-merge@^4.1.0:
|
|||
dependencies:
|
||||
lodash "^4.17.5"
|
||||
|
||||
webpack-sources@1.3.0, webpack-sources@^1.0.1, webpack-sources@^1.1.0:
|
||||
webpack-sources@1.4.3:
|
||||
version "1.4.3"
|
||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
|
||||
integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
|
||||
dependencies:
|
||||
source-list-map "^2.0.0"
|
||||
source-map "~0.6.1"
|
||||
|
||||
webpack-sources@^1.0.1, webpack-sources@^1.1.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
|
||||
integrity sha512-OiVgSrbGu7NEnEvQJJgdSFPl2qWKkWq5lHMhgiToIiN9w34EBnjYzSYs+VbL5KoYiLNtFFa7BZIKxRED3I32pA==
|
||||
|
|
|
|||
Loading…
Reference in a new issue