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

This commit is contained in:
Dane Everitt 2020-07-04 22:16:06 -07:00
parent e9f553dede
commit becad7b3c7
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 31 additions and 27 deletions

View file

@ -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>

View file

@ -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',
};

View file

@ -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: {