Vue Cli3配置文件優化處理

1、設置productionSourceMap為false

如果不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。

設置為false打包時候不會出現.map文件

 

module.exports = {
    productionSourceMap: false
}

 

2、代碼壓縮

安裝uglifyjs-webpack-plugin插件，可以去除項目中console.log和debugger

npm install uglifyjs-webpack-plugin --save

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生產環境相關配置
if (isProduction) {
    // 代碼壓縮
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生產環境去除console等信息
                compress: {
                    warnings: false, // 若打包錯誤，則注釋這行
                    drop_debugger: true,//是否移除debugger
                    drop_console: true,
                    pure_funcs: ['console.log']//移除console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

 

3、圖片資源壓縮

 安裝 image-webpack-loader 插件，可以將大圖片進行壓縮從而縮小打包體積

npm install image-webpack-loader --save

    chainWebpack: config => {
        // ============壓縮圖片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============壓縮圖片 end============
    }

 

4、開啟gzip壓縮

開啟gzip壓縮，可以優化http請求,提高加載速度

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

const CompressionPlugin = require("compression-webpack-plugin");
// 開啟gzip壓縮
config.plugins.push(new CompressionPlugin({
    algorithm: 'gzip',
    test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件擴展名
    // threshold: 10240, // 對超過10k的數據進行壓縮
    threshold: 5120, // 對超過5k的數據進行壓縮
    minRatio: 0.8,
    cache: true, // 是否需要緩存
    deleteOriginalAssets:false  // true刪除源文件(不建議);false不刪除源文件
 }))