Merge pull request #1696 from SUI-Components/feat/webpack-cache

Feat/webpack cache
SUI-Components · Jan 4, 2024 · e62fde4 · e62fde4
2 parents 8584154 + fc596c2
commit e62fde4
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 6 deletions.
diff --git a/packages/sui-bundler/shared/config.js b/packages/sui-bundler/shared/config.js
@@ -1,4 +1,5 @@
 /* Extract sui-bundler from package.json -> "config": {"sui-bundler": { ... }} */
+const path = require('path')
 const {config: packageJsonConfig = {}} = require(`${process.cwd()}/package.json`)
 
 const {'sui-bundler': config = {}} = packageJsonConfig
@@ -8,3 +9,4 @@ exports.config = config
 exports.supportLegacyBrowsers = supportLegacyBrowsers
 exports.extractComments = extractComments
 exports.sourceMap = (sourcemaps && sourcemaps.prod) || false
+exports.cacheDirectory = path.resolve(process.cwd(), '.sui/cache')
diff --git a/.../sui-bundler/webpack.config.server.dev.js → .../sui-bundler/webpack.config.client.dev.js b/.../sui-bundler/webpack.config.server.dev.js → .../sui-bundler/webpack.config.client.dev.js
@@ -11,7 +11,7 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/i
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
-const {supportLegacyBrowsers} = require('./shared/config.js')
+const {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
@@ -25,6 +25,7 @@ process.env.NODE_ENV = 'development'
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
 const webpackConfig = {
+  name: 'client',
   mode: 'development',
   context: path.resolve(PWD, 'src'),
   resolve: {
@@ -49,6 +50,11 @@ const webpackConfig = {
   entry: {
     app: [`webpack-hot-middleware/client?path=${CDN}__webpack_hmr`, MAIN_ENTRY_POINT]
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: 'brotli'
+  },
   target: 'web',
   optimization: {
     checkWasmTypes: false,

diff --git a/packages/sui-bundler/webpack.config.dev.js b/packages/sui-bundler/webpack.config.dev.js
@@ -9,7 +9,7 @@ const {envVars, MAIN_ENTRY_POINT, config, cleanList, when} = require('./shared/i
 const definePlugin = require('./shared/define.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig, defaultAlias} = require('./shared/resolve-alias.js')
-const {supportLegacyBrowsers} = require('./shared/config.js')
+const {supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
@@ -23,6 +23,7 @@ process.env.NODE_ENV = 'development'
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
 const webpackConfig = {
+  name: 'client-local',
   mode: 'development',
   context: path.resolve(PWD, 'src'),
   resolve: {
@@ -51,6 +52,11 @@ const webpackConfig = {
     static: outputPath,
     hot: true
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: 'brotli'
+  },
   target: 'web',
   optimization: {
     checkWasmTypes: false,

diff --git a/packages/sui-bundler/webpack.config.prod.js b/packages/sui-bundler/webpack.config.prod.js
@@ -11,7 +11,7 @@ const InlineChunkHtmlPlugin = require('./shared/inline-chunk-html-plugin.js')
 
 const {when, cleanList, envVars, MAIN_ENTRY_POINT, config} = require('./shared/index.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
-const {extractComments, sourceMap, supportLegacyBrowsers} = require('./shared/config.js')
+const {extractComments, sourceMap, supportLegacyBrowsers, cacheDirectory} = require('./shared/config.js')
 const {resolveLoader} = require('./shared/resolve-loader.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
 const sassRules = require('./shared/module-rules-sass.js')
@@ -35,6 +35,7 @@ const target = supportLegacyBrowsers ? ['web', 'es5'] : 'web'
 /** @type {WebpackConfig} */
 const webpackConfig = {
   devtool: sourceMap,
+  name: 'client',
   mode: 'production',
   target,
   context: path.resolve(CWD, 'src'),
@@ -66,6 +67,11 @@ const webpackConfig = {
     minimizer: [minifyJs({extractComments, sourceMap}), minifyCss()].filter(Boolean),
     runtimeChunk: true
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: false
+  },
   plugins: cleanList([
     new webpack.ProvidePlugin({
       process: 'process/browser'

diff --git a/packages/sui-bundler/webpack.config.server.js b/packages/sui-bundler/webpack.config.server.js
@@ -3,6 +3,7 @@ const webpackNodeExternals = require('webpack-node-externals')
 const path = require('path')
 
 const {config, when, cleanList} = require('./shared/index.js')
+const {cacheDirectory} = require('./shared/config.js')
 const createBabelRules = require('./shared/module-rules-babel.js')
 const manifestLoaderRules = require('./shared/module-rules-manifest-loader.js')
 const {aliasFromConfig} = require('./shared/resolve-alias.js')
@@ -12,10 +13,13 @@ const filename = '[name].[chunkhash:8].js'
 
 /** @typedef {import('webpack').Configuration} WebpackConfig */
 
+const isProduction = process.env.NODE_ENV === 'production'
+
 /** @type {WebpackConfig} */
 const webpackConfig = {
+  name: 'server',
   context: path.resolve(process.cwd(), 'src'),
-  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  mode: isProduction ? 'production' : 'development',
   resolve: {
     alias: {...aliasFromConfig},
     extensions: ['.js', '.json'],
@@ -34,6 +38,11 @@ const webpackConfig = {
     minimize: true,
     nodeEnv: false
   },
+  cache: {
+    type: 'filesystem',
+    cacheDirectory,
+    compression: !isProduction ? 'brotli' : false
+  },
   externals: [webpackNodeExternals()],
   plugins: [new webpack.DefinePlugin({'global.GENTLY': false})],
   resolveLoader,

diff --git a/packages/sui-ssr/bin/sui-ssr-dev.js b/packages/sui-ssr/bin/sui-ssr-dev.js
@@ -14,7 +14,7 @@ const webpack = require('webpack')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const webpackHotMiddleware = require('webpack-hot-middleware')
 const nodemon = require('nodemon')
-const clientConfig = require('@s-ui/bundler/webpack.config.server.dev.js')
+const clientConfig = require('@s-ui/bundler/webpack.config.client.dev.js')
 const linkLoaderConfigBuilder = require('@s-ui/bundler/loaders/linkLoaderConfigBuilder.js')
 
 const serverConfigFactory = require('../compiler/server.js')
@@ -76,7 +76,7 @@ const start = ({packagesToLink, linkAll}) => {
   const app = express()
   const clientCompiler = webpack(
     linkLoaderConfigBuilder({
-      config: require('@s-ui/bundler/webpack.config.server.dev.js'),
+      config: clientConfig,
       linkAll,
       packagesToLink
     })
@@ -135,6 +135,7 @@ const start = ({packagesToLink, linkAll}) => {
       const script = nodemon({
         script: `${SERVER_OUTPUT_PATH}/index.js`,
         watch: [SERVER_OUTPUT_PATH],
+        nodeArgs: '--inspect',
         delay: 200
       })