原包大小以下主要操作在vue.config.js文件下进行。如果没有该文件，则在项目根目录下新建一个。1.去除.map文件.map文件的作用：项目打包后，对代码进行压缩加密。如果运行时报错，输出的错误信息无法准确知道代码在哪里报错。使用.map，就像未加密的代码一样，准确的输出是哪一行和哪一列是错误的。Operation:module.exports={//...productionSourceMap:false,}Packagesize:2.Imagecompression这个操作会压缩图片质量，选择使用操作：npminstallimage-webpack-loader--save-devmodule.exports={//...chainWebpack:config=>{//...config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader'）。options({bypassOnDebug:true}).end()},}Packagesize:3.console.log越多，console代码去掉，效果越明显。可以随意使用。行动：npminstalluglifyjs-webpack-plugin--save-devmodule.exports={//...chainWebpack:config=>{if(process.env.NODE_ENV!=='production'){config.plugin('uglifyjs-plugin').use('uglifyjs-webpack-plugin',[{uglifyOptions:{warnings:false,compress:{drop_console:true,drop_debugger:false,pure_funcs:['console.log']}}}])。end()}}}Packagesize:4.CDN加速维护不受控制，所以只有那些不能改的代码或库被分离出来，通过CDN加载来加速。为了避免在使用CDN时出现陷阱，建议使用靠谱的CDN。使用此选项。不推荐使用。操作：module.exports={//...configureWebpack:config=>{if(process.env.NODE_ENV==='production'){//分离不用的资源库config.externals={'vue':'Vue','vue-router':'VueRouter'}}}}Packagesize:5.开启Gzip压缩Gizp压缩是一种HTTP请求优化方式，通过减小文件体积来提高加载速度，体积可以减少60%以上。注意：这需要服务端配合开启Gzip，否则打包时可以不配置，直接在服务端进行Gzip压缩。操作：npminstallcompression-webpack-plugin--save-devmodule.exports={//...chainWebpack:config=>{if(process.env.NODE_ENV==='production'){config.plugin('gzip-plugin').use('compression-webpack-plugin',[{filename:'[path].gz[query]',algorithm:'gzip',test:/\.js$|\.html$|\.json$|\.css$|\.ttf$/,threshold:0,//只有大于这个值的资源才会被处理minRatio:0.8,//只有压缩比小于这个值的资源才会被处理被处理deleteOriginalAssets:true//删除原文件}]).end()}}}包大小：
