vue打包上线的一些优化操作

最近在研究关于vue打包上线的一些东西，整理记录一下

1、代码压缩

在上线时对代码进行压缩，可以减少文件体积，文件加载速度更快，用户体验更好，同时压缩后的代码可读性变差，如果比较在意别人看你的源码，这个是很有必要的

具体实现

安装uglify-js-plugin插件

npm i uglify-js-plugin -S -D

配置插件
在项目根目录下创建vue.config.js

// 代码压缩插件
const UglifyJsPlugin = require('uglify-js-plugin')
module.exports = {
    configureWebpack: {
        // 代码压缩
        plugins: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    //生产环境自动删除console
                    compress: {
                        drop_debugger: true,
                        drop_console: true,
                        pure_funcs: ['console.log']
                    }
                },
                sourceMap: false, //移除map
                parallel: true
            })
        ]
    },
}

完成以上配置再次打包，此时的代码就被压缩了

2、给文件名添加时间戳

在新版本更新上线后，如果文件名和原来一样容易出现浏览器缓存的问题，出现明明做了修改修了bug但用户怎么刷新都还是旧版本，非要清除浏览器缓存才能看到，用户体验非常不好，所以每次做了修改最好文件名都不一样，以免浏览器直接从缓存读取文件

具体实现

const Timestamp = new Date().getTime();
module.exports = {
    configureWebpack: {
        // 给打包的文件名加上时间戳
        output: {
            filename: `js/[name].${Timestamp}.js`,
            chunkFilename: `js/[name].${Timestamp}.js`
        }
    },
}

保存后从新打包就可以看到打包出来的js文件都加上了时间戳

3、禁用vue调试工具

在上线的项目中一些数据比较敏感通常是不想被人看到的，此时可以禁用vue的开发工具，

具体实现

在main.js中添加如下配置

//禁用vue开发工具
Vue.config.debug = false;
Vue.config.devtools = false;

4、移除wabpack相关文件

在打包时如果没有开启生产模式，打包后会带有webkack://相关文件，此时可以更改模式为生产模式

具体实现

module.exports = {
	//移除map，需要和mode结合使用，mode:'production'才生效
    productionSourceMap: false,
    configureWebpack: {
        //配置模式
        mode:'production',
    },
}

配置前后对比
配置前

配置后

5、去除log

项目在开发时为了调试方便，会留下许多log，但是打包上线时通常是不需要的，这边可以通过插件去除

具体实现

安装transform-remove-console插件

npm i babel-plugin-transform-remove-console -S -D

在babel.config.js中添加配置

module.exports = {
  //移除log输出
  'plugins':[
    'transform-remove-console'
  ]
}