K
K
Kwyz2020-05-18 16:51:48
Client side optimization
Kwyz, 2020-05-18 16:51:48

How to remove monaco-editor plugin from Vue build?

In general, there is a Vue project that uses the monaco-editor plugin for dynamic rendering of forms on one page. The project took too long to build, so I decided that I needed to set up the config. After configuration, when opening a page with monaco-editor, an error is generated in the console:

languageFeatures.js?ff36:85 Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?ccf6:540)
    at eval (webWorker.js?af50:54)


Here is the config code:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgecssPlugin = require("purgecss-webpack-plugin");


module.exports = {
    transpileDependencies: ["vuex-persist", "vuex-persistedstate"],
    configureWebpack: {
        devtool: false,
        optimization: {
            splitChunks: {
                minSize: 10000, 
                maxSize: 250000, 
            },
            nodeEnv: "production",
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    extractComments: 'false',
                    parallel: true,
                }),
            ],
            removeEmptyChunks: true,
            removeAvailableModules: true,
            mergeDuplicateChunks: true
        },
        plugins: [
            new MonacoWebpackPlugin({
                languages: ['javascript', 'css', 'html', 'typescript', 'json'],
                features: ['!gotoSymbol'],
            }),
            new PurgecssPlugin({paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true})}),
        ],
    }
};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question