继后端进行版本升级后，想着对前端也进行一下优化，顺便记录一下

Vue部分优化记录

一、说明

继后端进行版本升级后，想着对前端也进行一下优化，顺便记录一下

二、记录

2.1 版本更新刷新浏览器缓存

由于之前更新时打包是按默认来的，每次打包的js文件名都一样，导致浏览器缓存可能不会刷新，这次对每次打包的js文件名用时间戳命名。

• vue.config.js

const  Timestamp = new Date().getTime(); //时间戳
module.exports = {
    configureWebpack: {
        output: {
            filename: 'js/[name].'+Timestamp+'.js',
            chunkFilename: 'js/[name].'+Timestamp+'.js'
        }
    }
}

2.2 环境问题

之前运行命令是复制的，没有和配置文件联动，会导致实际到线上的还是开发环境，导致包体积过大，实际上只需要使用默认的命令就可以（之前在运行命令加了个–mode prod）

• package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
}

2.3 构建js文件包分析

这个是自带的一个功能，通过在运行命令增加 –report 就可以在构建后倒出一个report.html，用这个就可以看到每个js包含了哪些东西，如果有公共的包可以转换为cdn去加载。

• package.json

"scripts": {
  "build": "vue-cli-service build --report",
}

2.4 删除构建js文件中的注释和console

通过引入插件uglifyjs-webpack-plugin实现

• vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    output: {
                        comments: false, // 去掉注释
                    },
                    warnings: false,
                    compress: {
                        drop_console: true,
                        drop_debugger: false,
                        pure_funcs: ['console.log']//移除console
                    }
                }
            })
        ]
    }
}

2.5 Gzip压缩

通过引入插件compression-webpack-plugin实现，对导出文件进行gzip压缩，进一步加速加载速度

• vue.config.js

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionPlugin({//gzip压缩配置
                test:/\.js$|\.html$|\.css/,//匹配文件名
                threshold:10240,//对超过10kb的数据进行压缩
                deleteOriginalAssets:false,//是否删除原文件
            })
        ]
    }
}

此为博主副博客，留言请去主博客，转载请注明出处：https://www.baby7blog.com/myBlog/137.html