Merge pull request #29 from lbmaian/devmode

Development mode build improvements
LiveTL · Dec 3, 2021 · 3472561 · 3472561
2 parents 4980d47 + 1704fb2
commit 3472561
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -20,7 +20,7 @@ const safelistPatterns = [
   /^[mphw]\w?-\d\.5$/
 ];
 
-module.exports = (purge = false) => {
+module.exports = (minify = false) => {
   const postcss = [];
   return [
     require('postcss-import')(),
@@ -29,23 +29,22 @@ module.exports = (purge = false) => {
     require('autoprefixer')(),
     require('tailwindcss')(tailwindConfig),
     ...postcss,
-    purge &&
-      require('cssnano')({
-        preset: 'default'
-      }),
-    purge &&
-      require('@fullhuman/postcss-purgecss')({
-        content: ['./**/*.svelte'],
-        extractors: [
-          {
-            extractor,
-            extensions: ['svelte']
-          }
-        ],
-        safelist: {
-          standard: safelistSelectors,
-          deep: safelistPatterns
+    minify && require('cssnano')({
+      preset: 'default'
+    }),
+    // Always tree shake CSS even in development mode for ~99% size reduction
+    require('@fullhuman/postcss-purgecss')({
+      content: ['./**/*.svelte'],
+      extractors: [
+        {
+          extractor,
+          extensions: ['svelte']
         }
-      })
+      ],
+      safelist: {
+        standard: safelistSelectors,
+        deep: safelistPatterns
+      }
+    })
   ].filter(Boolean);
 };
diff --git a/webpack.config.js b/webpack.config.js
@@ -19,13 +19,13 @@ const extReloader = new ExtReloader({
   reloadPage: true
 });
 
-const transformManifest = (manifestString, version, isChrome = false) => {
+const transformManifest = (manifestString, version, prod, isChrome = false) => {
   const newManifest = {
     ...JSON.parse(manifestString),
     version
   };
   if (isChrome) newManifest.incognito = 'split';
-  return JSON.stringify(newManifest);
+  return JSON.stringify(newManifest, null, prod ? 0 : 2);
 };
 
 module.exports = (env, options) => {
@@ -34,6 +34,7 @@ module.exports = (env, options) => {
 
   const envVersion = env.version;
   const hasEnvVersion = (envVersion != null && typeof envVersion === 'string');
+  const watch = env.WEBPACK_WATCH;
 
   const cssConfig = {
     test: /\.(sa|sc|c)ss$/,
@@ -87,7 +88,7 @@ module.exports = (env, options) => {
                 dev: !prod // Built-in HMR
               },
               emitCss: false,
-              hotReload: !prod,
+              hotReload: !prod && watch,
               preprocess
             }
           }
@@ -102,6 +103,9 @@ module.exports = (env, options) => {
         cssConfig
       ]
     },
+    optimization: {
+      concatenateModules: true // concatenate modules even in development mode for cleaner output
+    },
     plugins: [
       new CleanWebpackPlugin(),
       new CopyWebpackPlugin({
@@ -112,15 +116,15 @@ module.exports = (env, options) => {
           },
           {
             from: 'src/manifest.json',
-            transform: (content) => {
-              return transformManifest(content, hasEnvVersion ? envVersion : version);
+            transform(content) {
+              return transformManifest(content, hasEnvVersion ? envVersion : version, prod);
             }
           },
           {
             from: 'src/manifest.json',
             to: 'manifest.chrome.json',
-            transform: (content) => {
-              return transformManifest(content, hasEnvVersion ? envVersion : version, true);
+            transform(content) {
+              return transformManifest(content, hasEnvVersion ? envVersion : version, prod, true);
             }
           }
         ]
@@ -139,16 +143,18 @@ module.exports = (env, options) => {
     config.devtool = false;
   } else {
     config.devtool = 'eval-cheap-module-source-map';
-    config.plugins.push(new webpack.HotModuleReplacementPlugin(), extReloader);
-    // config.devServer = {
-    //   host: 'localhost',
-    //   port: 6000,
-    //   hot: true,
-    //   contentBase: path.join(__dirname, 'build'),
-    //   headers: { 'Access-Control-Allow-Origin': '*' },
-    //   writeToDisk: true,
-    //   disableHostCheck: true
-    // };
+    if (watch) {
+      config.plugins.push(new webpack.HotModuleReplacementPlugin(), extReloader);
+      // config.devServer = {
+      //   host: 'localhost',
+      //   port: 6000,
+      //   hot: true,
+      //   contentBase: path.join(__dirname, 'build'),
+      //   headers: { 'Access-Control-Allow-Origin': '*' },
+      //   writeToDisk: true,
+      //   disableHostCheck: true
+      // };
+    }
   }
 
   return config;