[Build] Fix SourceMaps for prod builds (codesandbox#2287)

* Enable sourcemaps once again

* Enable babel caching

* Upgrade babel and removed unused babel dependencies

* Remove unused css in embed

* Fix tests

* Simplify babel lockfile

* Deduplicate all yarn dependencies

* Deduplicate test dependencies

* Move sandpack and react-sandpack to standalone_packages

* Fix ts-jest

* Update circleci cache for a fresh start

* Fix jest

* Fix keys

* Add more to the cache

* Test caches

* Upgrade caches

Author: CompuIves

.circleci/config.yml

@@ -25,61 +25,75 @@ aliases:
 
   - &restore_deps_cache
     keys:
-      - v24-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v24-dependency-cache-{{ .Branch }}
-      - v24-dependency-cache
+      - v26-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v26-dependency-cache-{{ .Branch }}
+      - v26-dependency-cache
 
   - &save_deps_cache
-    key: v24-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v26-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
       - packages/chrome-extension/node_modules
       - packages/codesandbox-api/node_modules
       - packages/common/node_modules
       - packages/dynamic-pages/node_modules
+      - packages/deps/node_modules
+      - packages/executors/node_modules
       - packages/homepage/node_modules
       - packages/node-services/node_modules
       - packages/notifications/node_modules
       - packages/react-embed/node_modules
-      - packages/react-sandpack/node_modules
       - packages/sandbox-hooks/node_modules
-      - packages/sandpack/node_modules
       - packages/sse-hooks/node_modules
 
   - &restore_standalone_deps_cache
     keys:
-      - v24-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      - v26-standalone-dependency-cache-{{ .Branch }}-{{ checksum
         "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v24-standalone-dependency-cache-{{ .Branch }}
-      - v24-standalone-dependency-cache
+      - v26-standalone-dependency-cache-{{ .Branch }}
+      - v26-standalone-dependency-cache
 
   - &save_standalone_deps_cache
     key:
-      v24-standalone-dependency-cache-{{ .Branch }}-{{ checksum
+      v26-standalone-dependency-cache-{{ .Branch }}-{{ checksum
       "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_homepage_cache
-    key: v24-prod-homepage-build-cache-master
+    key: v26-prod-homepage-build-cache-master
 
-  - &restore_prod_cache
+  - &restore_prod_result
     key:
-      v24-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
-      .Environment.CIRCLE_SHA1 }}
+      v26-prod-build-result-{{ .Environment.CIRCLE_BRANCH
+      }}-{{.Environment.CIRCLE_SHA1 }}
+
+  - &save_prod_build_cache
+    key:
+      v26-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+      }}-{{.Environment.CIRCLE_SHA1 }}
+    paths:
+      - packages/app/node_modules/.cache
+
+  - &restore_prod_build_cache
+    keys:
+      - v26-prod-build-cache-{{ .Environment.CIRCLE_BRANCH
+        }}-{{.Environment.CIRCLE_SHA1 }}
+      - v26-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-
+      - v26-prod-build-cache-master-
 
   # To persist the images built by sharp
   - &save_prod_homepage_cache
     key:
-      v24-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v26-prod-homepage-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/homepage/public
 
-  - &save_prod_cache
+  - &save_prod_result
     key:
-      v24-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{
+      v26-prod-build-result-{{ .Environment.CIRCLE_BRANCH }}-{{
       .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
@@ -134,6 +148,7 @@ commands:
       - restore_cache: *restore_deps_cache
       - attach_workspace: *attach_deps_workspace
       - restore_cache: *restore_prod_homepage_cache
+      - restore_cache: *restore_prod_build_cache
       - run:
           name: Build Application
           command: yarn build:prod
@@ -143,7 +158,8 @@ commands:
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
               node packages/app/scripts/sentry-create-release.js
             fi
-      - save_cache: *save_prod_cache
+      - save_cache: *save_prod_build_cache
+      - save_cache: *save_prod_result
       - run:
           name: Remove non-images from public
           command: |
@@ -217,7 +233,7 @@ commands:
         type: string
         default: '$DOCKER_PWD'
     steps:
-      - restore_cache: *restore_prod_cache
+      - restore_cache: *restore_prod_result
       - run:
           name: Docker Sign In
           command:

packages/app/config/babel.dev.js

@@ -4,6 +4,8 @@ module.exports = {
   // This is a feature of `babel-loader` for webpack (not Babel itself).
   // It enables caching results in OS temporary directory for faster rebuilds.
   cacheDirectory: true,
+  cacheCompression: false,
+  compact: false,
   presets: [
     // Latest stable ECMAScript features
     require.resolve('@babel/preset-flow'),

packages/app/config/babel.prod.js

@@ -1,6 +1,9 @@
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
+  cacheDirectory: true,
+  cacheCompression: true,
+  compact: true,
   presets: [
     require.resolve('@babel/preset-flow'),
     // Latest stable ECMAScript features

packages/app/config/webpack.common.js

@@ -3,11 +3,13 @@ const path = require('path');
 const fs = require('fs');
 const paths = require('./paths');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const threadLoader = require('thread-loader');
 const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
 const env = require('@codesandbox/common/lib/config/env');
 const getHost = require('@codesandbox/common/lib/utils/host');
+const postcssNormalize = require('postcss-normalize');
 
 const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');
@@ -21,6 +23,63 @@ const babelConfig = __DEV__ && !SANDBOX_ONLY ? babelDev : babelProd;
 const publicPath = SANDBOX_ONLY || __DEV__ ? '/' : getHost.default() + '/';
 const isLint = 'LINT' in process.env;
 
+// common function to get style loaders
+const getStyleLoaders = (cssOptions, preProcessor) => {
+  const loaders = [
+    __DEV__ && require.resolve('style-loader'),
+    __PROD__ && {
+      loader: MiniCssExtractPlugin.loader,
+      options: {},
+    },
+    {
+      loader: require.resolve('css-loader'),
+      options: cssOptions,
+    },
+    {
+      // Options for PostCSS as we reference these options twice
+      // Adds vendor prefixing based on your specified browser support in
+      // package.json
+      loader: require.resolve('postcss-loader'),
+      options: {
+        // Necessary for external CSS imports to work
+        // https://github.com/facebook/create-react-app/issues/2677
+        ident: 'postcss',
+        plugins: () => [
+          require('postcss-flexbugs-fixes'),
+          require('postcss-preset-env')({
+            autoprefixer: {
+              flexbox: 'no-2009',
+            },
+            stage: 3,
+          }),
+          // Adds PostCSS Normalize as the reset css with default options,
+          // so that it honors browserslist config in package.json
+          // which in turn let's users customize the target behavior as per their needs.
+          postcssNormalize(),
+        ],
+        sourceMap: __PROD__,
+      },
+    },
+  ].filter(Boolean);
+  if (preProcessor) {
+    loaders.push(
+      {
+        loader: require.resolve('resolve-url-loader'),
+        options: {
+          sourceMap: __PROD__,
+        },
+      },
+      {
+        loader: require.resolve(preProcessor),
+        options: {
+          sourceMap: true,
+        },
+      }
+    );
+  }
+  return loaders;
+};
+
 // Shim for `eslint-plugin-vue/lib/index.js`
 const ESLINT_PLUGIN_VUE_INDEX = `module.exports = {
   rules: {${fs
@@ -97,6 +156,7 @@ module.exports = {
     globalObject: 'this',
     jsonpFunction: 'csbJsonP', // So we don't conflict with webpack generated libraries in the sandbox
     pathinfo: false,
+    futureEmitAssets: true,
   },
 
   module: {
@@ -108,11 +168,18 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: [
-          'style-loader', // creates style nodes from JS strings
-          'css-loader', // translates CSS into CommonJS
-          'sass-loader', // compiles Sass to CSS, using Node Sass by default
-        ],
+        use: getStyleLoaders(
+          {
+            importLoaders: 2,
+            sourceMap: true,
+          },
+          'sass-loader'
+        ),
+        // Don't consider CSS imports dead code even if the
+        // containing package claims to have no side effects.
+        // Remove this when webpack adds a warning or an error for this.
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
       },
       // Transpile node dependencies, node deps are often not transpiled for IE11
       {
@@ -250,7 +317,15 @@ module.exports = {
       // in development "style" loader enables hot editing of CSS.
       {
         test: /\.css$/,
-        loaders: ['style-loader', 'css-loader'],
+        loaders: getStyleLoaders({
+          importLoaders: 1,
+          sourceMap: true,
+        }),
+        // Don't consider CSS imports dead code even if the
+        // containing package claims to have no side effects.
+        // Remove this when webpack adds a warning or an error for this.
+        // See https://github.com/webpack/webpack/issues/6571
+        sideEffects: true,
       },
       // For importing README.md
       {
@@ -454,5 +529,13 @@ module.exports = {
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
     new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+
+    __PROD__ &&
+      new MiniCssExtractPlugin({
+        // Options similar to the same options in webpackOptions.output
+        // both options are optional
+        filename: 'static/css/[name].[contenthash:8].css',
+        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+      }),
   ].filter(Boolean),
 };

packages/app/config/webpack.dev.js

@@ -20,9 +20,10 @@ module.exports = merge(
   commonConfig,
   {
     devtool: 'eval',
+    mode: 'development',
     output: {
       filename: 'static/js/[name].js',
-      pathinfo: false,
+      pathinfo: true,
     },
     optimization: {
       removeAvailableModules: false,

packages/app/config/webpack.prod.js

@@ -25,15 +25,62 @@ const normalize = normalizeName({ name: true, automaticNameDelimiter: '~' });
 module.exports = merge(commonConfig, {
   devtool: 'source-map',
   output: {
-    filename: 'static/js/[name].[chunkhash:8].js',
-    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-    sourceMapFilename: '[file].map', // Default
+    filename: 'static/js/[name].[contenthash:8].js',
+    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
   },
   mode: 'production',
   stats: 'verbose',
+  // optimization: {
+  //   minimize: false,
+  // },
 
   optimization: {
-    minimizer: [new TerserJSPlugin({ parallel: true })],
+    minimize: true,
+    minimizer: [
+      new TerserJSPlugin({
+        terserOptions: {
+          parse: {
+            // We want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minification steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending further investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          output: {
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
+          },
+        },
+        // Use multi-process parallel running to improve the build speed
+        // Default number of concurrent runs: os.cpus().length - 1
+        // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
+        // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
+        parallel: 2,
+        cache: true,
+        sourceMap: true,
+      }),
+    ],
     concatenateModules: true, // ModuleConcatenationPlugin
     namedModules: true, // NamedModulesPlugin()
     noEmitOnErrors: true, // NoEmitOnErrorsPlugin
@@ -61,10 +108,6 @@ module.exports = merge(commonConfig, {
   plugins: [
     process.env.ANALYZE && new BundleAnalyzerPlugin(),
     new webpack.DefinePlugin({ VERSION: JSON.stringify(VERSION) }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      debug: false,
-    }),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     new SWPrecacheWebpackPlugin({
@@ -306,11 +349,11 @@ module.exports = merge(commonConfig, {
         to: 'public/sse-hooks',
       },
     ]),
-    isMaster &&
-      new SentryWebpackPlugin({
-        include: 'src',
-        ignore: ['node_modules', 'webpack.config.js'],
-        release: VERSION,
-      }),
+    // isMaster &&
+    //   new SentryWebpackPlugin({
+    //     include: 'src',
+    //     ignore: ['node_modules', 'webpack.config.js'],
+    //     release: VERSION,
+    //   }),
   ].filter(Boolean),
 });