Vue Cli3 profile optimization

1, is set to false productionSourceMap

If no source map production environment, it may be set to false construct to accelerate production environment.

Is set to false when the package does not appear .map file

 

module.exports = {
    productionSourceMap: false
}

 

2, code compression

Uglifyjs-webpack-plugin installed plug-ins, you can remove items console.log and debugger

npm install uglifyjs-webpack-plugin --save

the require UglifyJsPlugin = const ( 'UglifyJS-WebPACK-plugin' )
 // production Related 
IF (isProduction) {
     // code compressor 
    config.plugins.push (
         new new UglifyJsPlugin ({ 
            uglifyOptions: { 
                // production environment information removal console 
                compress : { 
                    Represents warnings: to false , // if packaging errors, the comment line 
                    drop_debugger: to true , // whether to remove Debugger 
                    drop_console: to true , 
                    pure_funcs: [ 'the console.log'] // removal console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

 

3, compressed image resources

 Installation image-webpack-loader plug, a large image can be compressed to reduce the volume of packing

npm install image-webpack-loader --save

    chainWebpack: config => {
         // ============ ============ compressed picture Start 
        config.module 
            .rule ( 'Images' ) 
            .use ( ' Image Loader--webpack ' ) 
            .loader ( ' image-WebPACK-Loader ' ) 
            .options ({bypassOnDebug: to true }) 
            .end () 
        // ============ compressed pictures end === ========= 
    }

 

4, open gzip compression

Gzip compression turned on, you can optimize http request load faster

npm install compression-webpack-plugin --save-dev

the require CompressionPlugin = const ( "compression-WebPACK-plugin" );
 // open gzip compression 
config.plugins.push ( new new CompressionPlugin ({ 
    algorithm: 'gzip' , 
    Test: new new the RegExp (+ [ "JS" \\ (. " "," CSS "] the Join. (" | ") +") $ "), // matching file extension 
    // threshold: 10240, // for more than 10k of data compression 
    threshold: 5120, // for more than 5k the data compression 
    minRatio: 0.8 , 
    cache: to true , // whether to cache 
    deleteOriginalAssets: false   // to true to delete the source files (not recommended); false does not delete the source files 
 }))