nolanlawson
/
pinafore
forked from cybrespace/pinafore
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

better JS size and async CSS with mini-css-extract-plugin (#145) 

* better JS size and async CSS with mini-css-extract-plugin

* fix sourcemaps
This commit is contained in:
Nolan Lawson 2018-04-17 08:19:15 -07:00 committed by GitHub
parent b231466fff
commit 8cdfdd9bc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@ -5667,6 +5667,15 @@
"is-buffer": "1.1.6"
}
},
"last-call-webpack-plugin": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
"integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
"requires": {
"lodash": "4.17.5",
"webpack-sources": "1.1.0"
}
},
"lcid": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
@ -6206,6 +6215,15 @@
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
"integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg="
},
"mini-css-extract-plugin": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.0.tgz",
"integrity": "sha512-2Zik6PhUZ/MbiboG6SDS9UTPL4XXy4qnyGjSdCIWRrr8xb6PwLtHE+AYOjkXJWdF0OG8vo/yrJ8CgS5WbMpzIg==",
"requires": {
"loader-utils": "1.1.0",
"webpack-sources": "1.1.0"
}
},
"minimalistic-assert": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
@ -6798,6 +6816,15 @@
"wordwrap": "0.0.2"
}
},
"optimize-css-assets-webpack-plugin": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-4.0.0.tgz",
"integrity": "sha512-wcQJMk23VQAFdOYnF7pSTg3yvRsSmF3FBwuPf2MDE7e/AG4hoD5V+xxZkrhZEYZ6ZQezfu2qegprs0Z7Xc9xKA==",
"requires": {
"cssnano": "3.10.0",
"last-call-webpack-plugin": "3.0.0"
}
},
"optionator": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
@ -8378,9 +8405,9 @@
}
},
"sapper": {
"version": "github:nolanlawson/sapper#5069987d7d943edb6649eac06163391b7b54832f",
"version": "github:nolanlawson/sapper#d9db963a055aaaf542d405619ca46eb120c6dd92",
"requires": {
"chalk": "2.3.2",
"chalk": "2.4.0",
"chokidar": "1.7.0",
"escape-html": "1.0.3",
"mkdirp": "0.5.1",
@ -8432,13 +8459,13 @@
}
},
"chalk": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
"integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.0.tgz",
"integrity": "sha512-Wr/w0f4o9LuE7K53cD0qmbAMM+2XNLzR29vFn5hqko4sxGlUsyy363NvmyGIyk5tpe9cjTr9SJYbysEyPkRnFw==",
"requires": {
"ansi-styles": "3.2.1",
"escape-string-regexp": "1.0.5",
"supports-color": "5.3.0"
"supports-color": "5.4.0"
}
},
"chokidar": {
@ -8520,9 +8547,9 @@
}
},
"supports-color": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
"integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
"integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
"requires": {
"has-flag": "3.0.0"
}

4
package.json
View File

@ -55,16 +55,18 @@
"lodash": "^4.17.5",
"lodash-es": "^4.17.8",
"lodash-webpack-plugin": "^0.11.4",
"mini-css-extract-plugin": "^0.4.0",
"mkdirp": "^0.5.1",
"node-fetch": "^2.1.2",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"p-any": "^1.1.0",
"performance-now": "^2.1.0",
"pify": "^3.0.0",
"quick-lru": "^1.1.0",
"requestidlecallback": "^0.3.0",
"sapper": "github:nolanlawson/sapper#for-pinafore",
"sapper": "github:nolanlawson/sapper#for-pinafore-2",
"serve-static": "^1.13.1",
"stringz": "^1.0.0",
"style-loader": "^0.20.3",

46
webpack.client.config.js
View File

@ -3,6 +3,8 @@ const config = require('sapper/webpack/config.js')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const UglifyWebpackPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const isDev = config.dev
@ -28,11 +30,18 @@ module.exports = {
}
}
},
{
isDev && {
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
'style-loader',
'css-loader'
]
},
!isDev && {
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
].filter(Boolean)
@ -41,19 +50,22 @@ module.exports = {
setImmediate: false
},
optimization: {
minimizer: isDev ? [] : [new UglifyWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
ecma: 6,
mangle: true,
compress: true,
output: {
comments: false
minimizer: isDev ? [] : [
new UglifyWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
uglifyOptions: {
ecma: 6,
mangle: true,
compress: true,
output: {
comments: false
}
}
}
})]
}),
new OptimizeCSSAssetsPlugin({})
]
},
plugins: [
new LodashModuleReplacementPlugin({
@ -65,6 +77,10 @@ module.exports = {
requestTimeout: 120000
})
] : [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[id].[hash].css'
}),
new webpack.DefinePlugin({
'process.browser': true,
'process.env.NODE_ENV': '"production"'