Cut out all of the unused ace editor modes; significantly reduces bundle size

Author: DaneEveritt

resources/scripts/components/elements/AceEditor.tsx

@@ -3,6 +3,8 @@ import ace, { Editor } from 'brace';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Select from '@/components/elements/Select';
+// @ts-ignore
+import modes from '@/modes';
 
 // @ts-ignore
 require('brace/ext/modelist');
@@ -18,32 +20,6 @@ const EditorContainer = styled.div`
     }
 `;
 
-const modes: { [k: string]: string } = {
-    assembly_x86: 'Assembly (x86)',
-    c_cpp: 'C++',
-    coffee: 'Coffeescript',
-    css: 'CSS',
-    dockerfile: 'Dockerfile',
-    golang: 'Go',
-    html: 'HTML',
-    ini: 'Ini',
-    java: 'Java',
-    javascript: 'Javascript',
-    json: 'JSON',
-    kotlin: 'Kotlin',
-    lua: 'Luascript',
-    perl: 'Perl',
-    php: 'PHP',
-    properties: 'Properties',
-    python: 'Python',
-    ruby: 'Ruby',
-    plain_text: 'Plaintext',
-    toml: 'TOML',
-    typescript: 'Typescript',
-    xml: 'XML',
-    yaml: 'YAML',
-};
-
 Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
 
 export interface Props {
@@ -117,7 +93,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
                     >
                         {
                             Object.keys(modes).map(key => (
-                                <option key={key} value={key}>{modes[key]}</option>
+                                <option key={key} value={key}>{(modes as { [k: string]: string })[key]}</option>
                             ))
                         }
                     </Select>

resources/scripts/modes.js

@@ -0,0 +1,25 @@
+module.exports = {
+    assembly_x86: 'Assembly (x86)',
+    c_cpp: 'C++',
+    coffee: 'Coffeescript',
+    css: 'CSS',
+    dockerfile: 'Dockerfile',
+    golang: 'Go',
+    html: 'HTML',
+    ini: 'Ini',
+    java: 'Java',
+    javascript: 'Javascript',
+    json: 'JSON',
+    kotlin: 'Kotlin',
+    lua: 'Luascript',
+    perl: 'Perl',
+    php: 'PHP',
+    properties: 'Properties',
+    python: 'Python',
+    ruby: 'Ruby',
+    plain_text: 'Plaintext',
+    toml: 'TOML',
+    typescript: 'Typescript',
+    xml: 'XML',
+    yaml: 'YAML',
+};

webpack.config.js

@@ -1,10 +1,12 @@
 const path = require('path');
+const webpack = require('webpack');
 const AssetsManifestPlugin = require('webpack-assets-manifest');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const isProduction = process.env.NODE_ENV === 'production';
+const modes = Object.keys(require('./resources/scripts/modes'));
 
 module.exports = {
     cache: true,
@@ -72,6 +74,7 @@ module.exports = {
         moment: 'moment',
     },
     plugins: [
+        new webpack.ContextReplacementPlugin(/brace[/\\](mode|worker)/, new RegExp(`^\.\/(${modes.join('|')})$`)),
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         !isProduction ? new ForkTsCheckerWebpackPlugin({
             eslint: {