vue-cli3打包优化
2020-05-22 本文已影响0人
姜治宇
打包的常用优化策略有:
1、去掉console.log
2、去掉sourcemap
3、库文件不参与打包
vue-cli3变化较大,这些优化策略如何配置呢?
手动创建vue.config.js:
module.exports = {
productionSourceMap: false,//去掉sourcemap
publicPath:"./",//一般配置相对路径
//outputDir 时生成的生产环境构建文件的目录, 打包输出目录。 默认dist
outputDir:'dist',
devServer:{
port: 9001,//dev 开发环境端口配置 为9000, 不配 默认为8080
// proxy: {
// '/api': {
// target: 'http://192.168.110.150:8080/api',//开发服务器
// //target: 'http://192.168.200.51:3000/mock/151/api',//mock服务器
// changeOrigin: true,
// pathRewrite: {
// "^/api": ""
// }
// }
// }
},
//该对象将会被 webpack-merge 合并入最终的 webpack 配置。
configureWebpack:config => {
if (process.env.NODE_ENV === 'production') {
//去掉项目里面console
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
config.externals = {
'vue': 'Vue',
'view-design': 'iview',
}
}
}
}
其中最重要的就是configureWebpack这一项,这个传object对象或函数都可以,但函数更常用,因为从形参config里面可以获取和修改一些重要参数,比如externals的配置。