testing

apps/remix-ide/___webpack.config.js

@@ -0,0 +1,83 @@
+const nxWebpack = require('@nrwl/react/plugins/webpack')
+const CopyPlugin = require("copy-webpack-plugin");
+const webpack = require('webpack')
+const version = require('../../package.json').version
+const fs = require('fs')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const versionData = {
+  version: version,
+  timestamp: Date.now(),
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
+}
+
+fs.writeFileSync('./apps/remix-ide/src/assets/version.json', JSON.stringify(versionData))
+
+module.exports = config => {
+  const nxWebpackConfig = nxWebpack(config)
+  const webpackConfig = {
+    ...nxWebpackConfig,
+    resolve: {
+      ...nxWebpackConfig.resolve,
+      fallback: {
+        ...nxWebpackConfig.resolve.fallback,
+        "crypto": require.resolve("crypto-browserify"),
+        "stream": require.resolve("stream-browserify"),
+        "path": require.resolve("path-browserify"),
+        "http": require.resolve("stream-http"),
+        "https": require.resolve("https-browserify"),
+        "constants": require.resolve("constants-browserify"),
+        "os": false, //require.resolve("os-browserify/browser"),
+        "timers": false, // require.resolve("timers-browserify"),
+        "zlib": require.resolve("browserify-zlib"),
+        "fs": false,
+        "module": false,
+        "tls": false,
+        "net": false,
+        "readline": false,
+        "child_process": false,
+        "buffer": require.resolve("buffer/"),
+        "vm": require.resolve('vm-browserify'),
+      },
+    },
+    externals: {
+      ...nxWebpackConfig.externals,
+      solc: 'solc',
+    },
+
+    output: {
+      ...nxWebpackConfig.output,
+      publicPath: '/',
+      filename: `[name].${versionData.version}.${versionData.timestamp}.js`,
+      chunkFilename: `[name].${versionData.version}.${versionData.timestamp}.js`,
+    },
+    plugins: [
+      ...nxWebpackConfig.plugins,
+      //new BundleAnalyzerPlugin({
+      //  analyzerMode: 'static'
+      //}),
+      new CopyPlugin({
+        patterns: [
+          { from: '../../node_modules/monaco-editor/dev/vs', to: 'assets/js/monaco-editor/dev/vs' }
+        ].filter(Boolean)
+      }),
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+        url: ['url', 'URL'],
+        process: 'process/browser',
+      }),
+    ]
+  }
+
+  webpackConfig.output.chunkLoadTimeout = 600000
+
+  if (process.env.NODE_ENV === 'production') {
+    return {
+      ...webpackConfig,
+      mode: 'production',
+      devtool: 'source-map',
+    }
+  } else {
+    return webpackConfig
+  }
+}

apps/remix-ide/project.json

@@ -30,14 +30,18 @@
       },
       "configurations": {
         "development": {
+          "extractLicenses": false,
+          "sourceMap": false,
+          "vendorChunk": true,
+          "optimization": false
         },
         "production": {
-          "fileReplacements": [
+          "optimization": true,
-            {
+          "outputHashing": "all",
-              "replace": "apps/remix-ide/src/environments/environment.ts",
+          "sourceMap": false,
-              "with": "apps/remix-ide/src/environments/environment.prod.ts"
+          "namedChunks": false,
-            }
+          "extractLicenses": false,
-          ]
+          "vendorChunk": false
         }
       }
     },

apps/remix-ide/webpack.config.js

@@ -1,9 +1,10 @@
-const nxWebpack = require('@nrwl/react/plugins/webpack')
+const { composePlugins, withNx } = require('@nrwl/webpack');
-const CopyPlugin = require("copy-webpack-plugin");
+const { withReact } = require('@nrwl/react');
 const webpack = require('webpack')
+const CopyPlugin = require("copy-webpack-plugin");
 const version = require('../../package.json').version
 const fs = require('fs')
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const TerserPlugin = require("terser-webpack-plugin");
 
 const versionData = {
   version: version,
@@ -13,14 +14,14 @@ const versionData = {
 
 fs.writeFileSync('./apps/remix-ide/src/assets/version.json', JSON.stringify(versionData))
 
-module.exports = config => {
+// Nx plugins for webpack.
-  const nxWebpackConfig = nxWebpack(config)
+module.exports = composePlugins(withNx(), withReact(), (config) => {
-  const webpackConfig = {
+  // Update the webpack config as needed here.
-    ...nxWebpackConfig,
+  // e.g. `config.plugins.push(new MyPlugin())`
-    resolve: {
+
-      ...nxWebpackConfig.resolve,
+  // add fallback for node modules
-      fallback: {
+  config.resolve.fallback = {
-        ...nxWebpackConfig.resolve.fallback,
+    ...config.resolve.fallback,
     "crypto": require.resolve("crypto-browserify"),
     "stream": require.resolve("stream-browserify"),
     "path": require.resolve("path-browserify"),
@@ -38,24 +39,24 @@ module.exports = config => {
     "child_process": false,
     "buffer": require.resolve("buffer/"),
     "vm": require.resolve('vm-browserify'),
-      },
+  }
-    },
+
-    externals: {
+  // add externals
-      ...nxWebpackConfig.externals,
+  config.externals = {
+    ...config.externals,
     solc: 'solc',
-    },
+  }
 
-    output: {
+  // add public path
-      ...nxWebpackConfig.output,
+  config.output.publicPath = '/'
-      publicPath: '/',
+
-      filename: `[name].${versionData.version}.${versionData.timestamp}.js`,
+  // set filename
-      chunkFilename: `[name].${versionData.version}.${versionData.timestamp}.js`,
+  config.output.filename = `[name].${versionData.version}.${versionData.timestamp}.js`
-    },
+  config.output.chunkFilename = `[name].${versionData.version}.${versionData.timestamp}.js`
-    plugins: [
+
-      ...nxWebpackConfig.plugins,
+  // add plugin
-      //new BundleAnalyzerPlugin({
+  // add copy plugin
-      //  analyzerMode: 'static'
+  config.plugins.push(
-      //}),
     new CopyPlugin({
       patterns: [
         { from: '../../node_modules/monaco-editor/dev/vs', to: 'assets/js/monaco-editor/dev/vs' }
@@ -65,19 +66,28 @@ module.exports = config => {
       Buffer: ['buffer', 'Buffer'],
       url: ['url', 'URL'],
       process: 'process/browser',
+    })
+  )
+
+  // set minimizer
+  config.optimization.minimizer = [
+    new TerserPlugin({
+      parallel: true,
+      terserOptions: {
+        ecma: 6,
+        compress: {
+          drop_console: true,
+        },
+        output: {
+          comments: false,
+        },
+      },
+      extractComments: false,
     }),
-    ]
+  ];
-  }
 
-  webpackConfig.output.chunkLoadTimeout = 600000
+  console.log(config)
 
-  if (process.env.NODE_ENV === 'production') {
+
-    return {
+  return config;
-      ...webpackConfig,
+});
-      mode: 'production',
-      devtool: 'source-map',
-    }
-  } else {
-    return webpackConfig
-  }
-}

package.json

@@ -221,17 +221,18 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.4.4",
     "@fortawesome/fontawesome-free": "^5.8.1",
-    "@nrwl/cli": "^15.0.0",
+    "@nrwl/cli": "^15.6.3",
-    "@nrwl/eslint-plugin-nx": "^15.0.0",
+    "@nrwl/eslint-plugin-nx": "^15.6.3",
-    "@nrwl/jest": "15.0.0",
+    "@nrwl/jest": "15.6.3",
-    "@nrwl/js": "15.0.0",
+    "@nrwl/js": "15.6.3",
-    "@nrwl/linter": "15.0.0",
+    "@nrwl/linter": "15.6.3",
-    "@nrwl/node": "15.0.0",
+    "@nrwl/node": "15.6.3",
-    "@nrwl/react": "15.0.0",
+    "@nrwl/react": "15.6.3",
-    "@nrwl/tao": "^15.0.0",
+    "@nrwl/tao": "^15.6.3",
-    "@nrwl/web": "15.0.0",
+    "@nrwl/web": "15.6.3",
-    "@nrwl/webpack": "15.0.0",
+    "@nrwl/webpack": "15.6.3",
-    "@nrwl/workspace": "^15.0.0",
+    "@nrwl/workspace": "^15.6.3",
+    "@svgr/webpack": "^6.5.1",
     "@testing-library/react": "13.4.0",
     "@types/axios": "^0.14.0",
     "@types/chai": "^4.3.3",
@@ -323,7 +324,7 @@
     "npm-link-local": "^1.1.0",
     "npm-merge-driver": "^2.3.5",
     "npm-run-all": "^4.0.2",
-    "nx": "15.0.0",
+    "nx": "15.6.3",
     "nyc": "^13.3.0",
     "onchange": "^3.2.1",
     "os-browserify": "^0.3.0",
@@ -339,6 +340,7 @@
     "style-loader": "^3.3.1",
     "tap-spec": "^5.0.0",
     "tape": "^4.13.3",
+    "terser-webpack-plugin": "^5.3.6",
     "timers-browserify": "^2.0.12",
     "ts-jest": "^29.0.3",
     "ts-node": "10.9.1",