Make dev builds faster (#227)

* Make SW generation prod-only

* Use SpeedMeasurePlugin

* Refactor: Symlink directories for dev builds

* Lint fix

* Remove SpeedMeasurePlugin
This commit is contained in:
Alexander Ivanov 2021-10-26 16:21:28 +08:00 committed by GitHub
parent a6e3c889ff
commit 8c88ec6383
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 24 deletions

View file

@ -1,8 +1,6 @@
const webpack = require('webpack')
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
// https://webpack.js.org/guides/production/
const config = {
@ -57,26 +55,21 @@ const config = {
new webpack.NormalModuleReplacementPlugin(
/prismarine-viewer[/|\\]viewer[/|\\]lib[/|\\]utils/,
'./utils.web.js'
),
new WorkboxPlugin.GenerateSW({
// these options encourage the ServiceWorkers to get in there fast
// and not allow any straggling "old" SWs to hang around
clientsClaim: true,
skipWaiting: true,
include: ['index.html', 'manifest.json'] // not caching a lot as anyway this works only online
}),
new CopyPlugin({
patterns: [
{ from: path.join(__dirname, '/styles.css'), to: './styles.css' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/blocksStates/'), to: './blocksStates/' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
{ from: path.join(__dirname, 'assets/'), to: './' },
{ from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' },
{ from: path.join(__dirname, 'config.json'), to: './config.json' }
]
})
)
],
// The directories that can be optionally symlinked
[Symbol.for('webpack_directories')]: [
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/blocksStates/'), to: './blocksStates/' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
{ from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' }
],
// The files that will be copied
[Symbol.for('webpack_files')]: [
{ from: path.join(__dirname, '/styles.css'), to: './styles.css' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
{ from: path.join(__dirname, 'assets/'), to: './' },
{ from: path.join(__dirname, 'config.json'), to: './config.json' }
]
}

View file

@ -1,7 +1,36 @@
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const CopyPlugin = require('copy-webpack-plugin')
const fs = require('fs')
const path = require('path')
class SymlinkPlugin {
constructor (options) {
this.directories = options.directories ?? []
}
apply (compiler) {
compiler.hooks.afterEmit.tap(SymlinkPlugin.name, this.afterEmitHook.bind(this))
}
afterEmitHook (compilation) {
const dir = compilation.options.context
const output = compilation.outputOptions.path
for (const { from: _from, to: _to } of this.directories) {
const to = path.resolve(output, _to)
if (fs.existsSync(to)) {
try {
fs.unlinkSync(to)
} catch (e) {
continue
}
}
const from = path.resolve(dir, _from)
fs.symlinkSync(from, to, 'junction')
}
}
}
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
@ -12,5 +41,9 @@ module.exports = merge(common, {
inline: true,
// open: true,
hot: true
}
},
plugins: [
new CopyPlugin({ patterns: common[Symbol.for('webpack_files')] }),
new SymlinkPlugin({ directories: common[Symbol.for('webpack_directories')] })
]
})

View file

@ -1,15 +1,30 @@
const { merge } = require('webpack-merge')
const common = require('./webpack.common.js')
const CopyPlugin = require('copy-webpack-plugin')
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
const WorkboxPlugin = require('workbox-webpack-plugin')
module.exports = merge(common, {
mode: 'production',
plugins: [
new CleanWebpackPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
new LodashModuleReplacementPlugin()
new LodashModuleReplacementPlugin(),
new CopyPlugin({
patterns: [
...common[Symbol.for('webpack_directories')],
...common[Symbol.for('webpack_files')]
]
}),
new WorkboxPlugin.GenerateSW({
// these options encourage the ServiceWorkers to get in there fast
// and not allow any straggling "old" SWs to hang around
clientsClaim: true,
skipWaiting: true,
include: ['index.html', 'manifest.json'] // not caching a lot as anyway this works only online
})
]
})