js / chunk-962737f2.1555a4ea. js от Uglify Js Неожиданный токен: pun c «{», ожидаемый: pun c «;» [УД / кусок 962737f2.1555a4ea js:. 1213] - PullRequest
1 голос
/ 23 апреля 2020

использование vue -cli4

Использование UglifyJsPlugin приводит к ряду проблем, потому что я хочу сжать размер пакета компонента для оптимизации ответа сервера

Babel. Config. Js es2015 был заменен @ Babel / preset - env ​​Я выполнил следующую конфигурацию Все еще существует проблема с проверкой синтаксиса. json

 "dependencies": {
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-stage-3": "^7.8.3",
    "babel": "^6.23.0",
    "babel-plugin-transform-runtime": "^7.0.0-beta.3",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.12.0",
    "cli": "^1.0.1",
    "core-js": "^3.6.4",
    "markdown-loader": "^5.1.0",
    "marked": "^0.8.2",
    "mavon-editor": "^2.8.3",
    "register-service-worker": "^1.7.1",
    "transform-runtime": "0.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.9.5",
    "@babel/runtime": "^7.4.5",
    "@vue/cli-plugin-babel": "^4.3.1",
    "@vue/cli-plugin-eslint": "^4.3.1",
    "@vue/cli-plugin-pwa": "^4.3.1",
    "@vue/cli-plugin-router": "^4.3.1",
    "@vue/cli-service": "^4.3.1",
    "babel-loader": "^7.1.5",
    "compression-webpack-plugin": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass-loader": "^8.0.2",
    "sass-resources-loader": "^2.0.3",
    "style-loader": "^1.1.4",
    "vue-markdown-loader": "^2.4.1",
    "vue-template-compiler": "^2.6.11"
  }

babel.config. js

module.exports = { 
        ["@babel/preset-env", {
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }]  
}

vue .config. js

const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin')
// 配置代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
/*配置cdn 引用加速*/
const cdn = {
    css: ['https://cdn.bootcss.com/element-ui/2.13.1/theme-chalk/index.css',
        'https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css'
    ],
    js: [
        'https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js',
        'https://unpkg.com/vue/dist/vue.js',
        'https://unpkg.com/element-ui/lib/index.js',
        'https://cdn.bootcss.com/element-ui/2.13.1/index.js', 
    ]
}
module.exports = { 
    publicPath: './', 
    outputDir: 'dist', 
    lintOnSave: true, 

    chainWebpack: (config) => { 
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({bypassOnDebug: true})
            .end() 
        config.module.rule('md')
            .test(/\.md/)
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('vue-markdown-loader')
            .loader('vue-markdown-loader/lib/markdown-compiler')
            .options({
                raw: true
            }) 
        config.module.rule('js').test(/\.js$/).use('babel-loader').loader('babel-loader')
        /* 配置 babel-loader */
        const babel_loader = config.module.rule('babel-loader') 
        babel_loader.exclude.add(/(node_modules|bower_components)/)
        babel_loader.test(/\.(e|j)s$/).use('babel-loader').loader('babel-loader') 
        if (process.env.NODE_ENV === 'production') { 
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
            if (process.env.npm_config_report) {
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
        } else { 
            config.plugin('html')
                .tap(args => {
                    args[0].cdn = cdn;
                    return args;
                });
        }
    },

    configureWebpack: (config) => {
        config.entry.app = ["babel-polyfill", "./src/main.js"];
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {

                optimization: {
                    minimizer: [
                        new UglifyJsPlugin({
                            uglifyOptions: {
                                warnings: false,
                                compress: {
                                    pure_funcs: ['console.log', 'console.debug']//移除console
                                }
                            }
                        })
                    ]
                },
                externals: {
                    /* 包名 : 全局变量名*/
                    'vue': 'Vue',
                    /*
                      'vuex': 'Vuex',
                      'vue-router': 'VueRouter',
                      'axios': 'axios',*/
                    // "Bootstrap": "bootstrap",
                    "elementui": 'ElementUI ',
                },
                plugins: [
                    //生产环境自动删除console
                    /*   new UglifyJsPlugin({
                           uglifyOptions: {
                               compress: {
                                   warnings: false,
                                   pure_funcs: ['console.log']//移除console
                               },
                               /!* compress: {
                                    warnings: false,
                                    drop_debugger: true,
                                    drop_console: true,
                                },*!/
                           },
                           sourceMap: false,
                           parallel: true,
                       }),*/ new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/, //匹配文件名
                        threshold: 10240, //对超过10k的数据进行压缩
                        deleteOriginalAssets: false //是否删除原文件
                    })]
            }
        } else if (process.env.NODE_ENV === 'development') { 
            config.mode = 'development';

            Object.assign(config, { 
                resolve: {
                    alias: {
                        '@': path.resolve(__dirname, './src'),
                        '@c': path.resolve(__dirname, './src/components')
                    }
                }
            });
            return {
                externals: { 
                    'vue': 'Vue', 
                    "elementui": 'ElementUI ',
                },
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/,  
                    threshold: 10240,  
                    deleteOriginalAssets: false 
                })]
            }
        }
    },

    productionSourceMap: false, 
    css: { 
        extract: false, 
        sourceMap: false, 
        loaderOptions: {}, 
        requireModuleExtension: false
    }, 
    parallel: require('os').cpus().length > 1, 
    pwa: {}, 
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 2001,
        https: false,
        hotOnly: false,
        open: true,  
        proxy: { 
            '/data': {
                target: 'http://localhost:7000',
                changeORIGIN: true
            }
        },
        before: (app) => {
        }
    }, 
    pluginOptions: {} 
}

Выше приведена полная конфигурация моего проекта. Эта проблема беспокоила меня много дней. Я перепробовал много методов, но они не имеют никакого эффекта

...