From e98c116605311152a57e3e66c42f85fb87a1c7e6 Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Tue, 26 Oct 2021 16:21:28 +0800 Subject: [PATCH] Make dev builds faster (#227) * Make SW generation prod-only * Use SpeedMeasurePlugin * Refactor: Symlink directories for dev builds * Lint fix * Remove SpeedMeasurePlugin --- webpack.common.js | 37 +++++++++++++++---------------------- webpack.dev.js | 35 ++++++++++++++++++++++++++++++++++- webpack.prod.js | 17 ++++++++++++++++- 3 files changed, 65 insertions(+), 24 deletions(-) diff --git a/webpack.common.js b/webpack.common.js index 9acdf8f..b738aa1 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -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' } ] } diff --git a/webpack.dev.js b/webpack.dev.js index c8aa4be..6b5584e 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -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')] }) + ] }) diff --git a/webpack.prod.js b/webpack.prod.js index 5c00efb..fce5e70 100644 --- a/webpack.prod.js +++ b/webpack.prod.js @@ -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 + }) ] })