improve bundle size, add webpack-bundle-analyzer

This commit is contained in:
Nolan Lawson 2018-01-14 17:50:29 -08:00
parent 01243ba4c1
commit 13231a8af4
7 changed files with 95 additions and 11 deletions

61
package-lock.json generated
View file

@ -216,6 +216,11 @@
"resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
"integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=" "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
}, },
"async-limiter": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
"integrity": "sha512-jp/uFnooOiO+L211eZOoSyzpOITMXx1rBITauYykG3BRYPu8h0UcxsPNB04RR5vo4Tyz3+ay17tR6JVf9qzYWg=="
},
"asynckit": { "asynckit": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -1340,6 +1345,11 @@
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
}, },
"ejs": {
"version": "2.5.7",
"resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.7.tgz",
"integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo="
},
"electron-releases": { "electron-releases": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/electron-releases/-/electron-releases-2.1.0.tgz", "resolved": "https://registry.npmjs.org/electron-releases/-/electron-releases-2.1.0.tgz",
@ -1818,6 +1828,11 @@
"resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz", "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
"integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=" "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY="
}, },
"filesize": {
"version": "3.5.11",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz",
"integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g=="
},
"fill-range": { "fill-range": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@ -3019,6 +3034,14 @@
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=" "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
}, },
"gzip-size": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",
"integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=",
"requires": {
"duplexer": "0.1.1"
}
},
"har-validator": { "har-validator": {
"version": "2.0.6", "version": "2.0.6",
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz", "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
@ -4617,6 +4640,11 @@
"wrappy": "1.0.2" "wrappy": "1.0.2"
} }
}, },
"opener": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
"integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg="
},
"optimist": { "optimist": {
"version": "0.6.1", "version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
@ -7120,6 +7148,11 @@
} }
} }
}, },
"ultron": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
"integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
},
"underscore": { "underscore": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
@ -7644,6 +7677,24 @@
} }
} }
}, },
"webpack-bundle-analyzer": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz",
"integrity": "sha1-Y+2G63HMTNqG9o5oWoRTC6ASZEk=",
"requires": {
"acorn": "5.3.0",
"chalk": "1.1.3",
"commander": "2.12.2",
"ejs": "2.5.7",
"express": "4.16.2",
"filesize": "3.5.11",
"gzip-size": "3.0.0",
"lodash": "4.17.4",
"mkdirp": "0.5.1",
"opener": "1.4.3",
"ws": "4.0.0"
}
},
"webpack-hot-middleware": { "webpack-hot-middleware": {
"version": "2.21.0", "version": "2.21.0",
"resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz", "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz",
@ -7754,6 +7805,16 @@
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
}, },
"ws": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-4.0.0.tgz",
"integrity": "sha512-QYslsH44bH8O7/W2815u5DpnCpXWpEK44FmaHffNwgJI4JMaSZONgPBTOfrxJ29mXKbXak+LsJ2uAkDTYq2ptQ==",
"requires": {
"async-limiter": "1.0.0",
"safe-buffer": "5.1.1",
"ultron": "1.1.1"
}
},
"xml2js": { "xml2js": {
"version": "0.4.19", "version": "0.4.19",
"resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz", "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.19.tgz",

View file

@ -40,6 +40,7 @@
"uglifyjs-webpack-plugin": "^1.1.5", "uglifyjs-webpack-plugin": "^1.1.5",
"url-search-params": "^0.10.0", "url-search-params": "^0.10.0",
"webpack": "^3.10.0", "webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.2",
"yargs": "^10.1.1" "yargs": "^10.1.1"
}, },
"engines": { "engines": {

View file

@ -9,6 +9,11 @@ const importURLSearchParams = () => import(
}) })
}) })
const importToast = () => import(
/* webpackChunkName: 'toast' */ './toast'
).then(mod => mod.toast)
export { export {
importURLSearchParams importURLSearchParams,
importToast
} }

View file

@ -96,7 +96,7 @@
import { themes } from '../../_static/themes' import { themes } from '../../_static/themes'
import { switchToTheme } from '../../_utils/themeEngine' import { switchToTheme } from '../../_utils/themeEngine'
import { goto } from 'sapper/runtime.js' import { goto } from 'sapper/runtime.js'
import { toast } from '../../_utils/toast' import { importToast } from '../../_utils/asyncModules'
export default { export default {
components: { components: {
@ -159,7 +159,7 @@
}) })
this.store.save() this.store.save()
switchToTheme(instanceThemes[newInstance] || 'default') switchToTheme(instanceThemes[newInstance] || 'default')
toast.say(`Logged out of ${instanceName}`) importToast().then(toast => toast.say(`Logged out of ${instanceName}`))
goto('/settings/instances') goto('/settings/instances')
} }
} }

View file

@ -56,7 +56,7 @@
import { store } from '../../_utils/store' import { store } from '../../_utils/store'
import { goto } from 'sapper/runtime.js' import { goto } from 'sapper/runtime.js'
import { switchToTheme } from '../../_utils/themeEngine' import { switchToTheme } from '../../_utils/themeEngine'
import { toast } from '../../_utils/toast' import { importToast } from '../../_utils/asyncModules'
import LoadingMask from '../../_components/LoadingMask' import LoadingMask from '../../_components/LoadingMask'
const REDIRECT_URI = (typeof location !== 'undefined' ? const REDIRECT_URI = (typeof location !== 'undefined' ?
@ -89,6 +89,7 @@
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
console.error(err) console.error(err)
} }
const toast = await importToast()
toast.say(`Error: ${err.message || err.name}. Is this a valid Mastodon instance?`) toast.say(`Error: ${err.message || err.name}. Is this a valid Mastodon instance?`)
} finally { } finally {
this.set({loading: false}) this.set({loading: false})
@ -99,6 +100,7 @@
let loggedInInstances = this.store.get('loggedInInstances') let loggedInInstances = this.store.get('loggedInInstances')
instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '') instanceName = instanceName.replace(/^https?:\/\//, '').replace('/$', '')
if (Object.keys(loggedInInstances).includes(instanceName)) { if (Object.keys(loggedInInstances).includes(instanceName)) {
const toast = await importToast()
toast.say(`You've already logged in to ${instanceName}`) toast.say(`You've already logged in to ${instanceName}`)
return return
} }
@ -120,6 +122,7 @@
this.set({loading: true}) this.set({loading: true})
await this.registerNewInstance(code) await this.registerNewInstance(code)
} catch (err) { } catch (err) {
const toast = await importToast()
toast.say(`Error: ${err.message || err.name}. Failed to connect to instance.`) toast.say(`Error: ${err.message || err.name}. Failed to connect to instance.`)
} finally { } finally {
this.set({loading: false}) this.set({loading: false})

View file

@ -1,5 +1,4 @@
import { init } from 'sapper/runtime.js' import { init } from 'sapper/runtime.js'
import toast from '../routes/_utils/toast.js'
// polyfills // polyfills
Promise.all([ Promise.all([
@ -11,7 +10,7 @@ Promise.all([
if (navigator.serviceWorker && navigator.serviceWorker.controller) { if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.onstatechange = (e) => { navigator.serviceWorker.controller.onstatechange = (e) => {
if (e.target.state === 'redundant') { if (e.target.state === 'redundant') {
toast.say('App update available. Reload to update.'); importToast().then(toast => toast.say('App update available. Reload to update.'));
} }
} }
} }

View file

@ -1,7 +1,8 @@
const webpack = require('webpack'); const webpack = require('webpack')
const config = require('sapper/webpack/config.js'); const config = require('sapper/webpack/config.js')
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isDev = config.dev; const isDev = config.dev;
@ -56,10 +57,24 @@ module.exports = {
].concat(isDev ? [ ].concat(isDev ? [
new webpack.HotModuleReplacementPlugin() new webpack.HotModuleReplacementPlugin()
] : [ ] : [
new webpack.DefinePlugin({
'process.browser': true,
'process.env.NODE_ENV': '"production"'
}),
/* disable while https://github.com/sveltejs/sapper/issues/79 is open */ /* disable while https://github.com/sveltejs/sapper/issues/79 is open */
//new ExtractTextPlugin('main.css'), //new ExtractTextPlugin('main.css'),
new webpack.optimize.ModuleConcatenationPlugin(), new webpack.optimize.ModuleConcatenationPlugin(),
new UglifyJSPlugin() new UglifyJSPlugin(),
new BundleAnalyzerPlugin({ // generates report.html and stats.json
analyzerMode: 'static',
generateStatsFile: true,
statsOptions: {
// allows usage with http://chrisbateman.github.io/webpack-visualizer/
chunkModules: true,
},
openAnalyzer: false,
logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
}),
]).filter(Boolean), ]).filter(Boolean),
devtool: isDev && 'inline-source-map' devtool: isDev && 'inline-source-map'
}; };