Vue-cli3脚手架之3webpack打包优化压缩网上的webpack优化很多，但是很多都是针对bable6或者vue-cli2或者webpack2.0的。当前版本为vue-cli3bable7webpack4.01。优化路由路由使用延迟加载示例'),meta:{isTimer:true,title:'Pleasechoosealoginmethod',}},2.第三方库采用按需加载的例子，element-ui是在vue-cli3中按需的load借助babel-plugin-component，我们可以只引入需要的组件来达到降低项目体积的目的。首先安装babel-plugin-componentyarnaddbabel-plugin-componentmodifybabel.config.jsmodule.exports={plugins:[['component',{libraryName:'element-ui',styleLibraryName:'theme-chalk'}]]接下来，如果你只想导入一些组件，在element-ui.js中导入你需要的组件importVuefrom'vue';import{Button,Select}from'element-ui';Vue.use(Button)Vue.use(Select)这种方式实现了element-ui的按需加载。3、gzip压缩如果Nginx服务器开启了gzip，会在服务器端对静态资源进行压缩。压缩包传输到浏览器后，浏览器会解压使用。大大提高了网络传输的效率，尤其是对于js、css等文本的压缩，效果明显。下面是Nginx开启gzip的配置：#Enable|Closegzip。gzipon|off;#文件只有大于指定大小时才压缩，单位kb。gzip_min_length10;#压缩级别，1-9，值越大，压缩率越大，但消耗CPU越多，压缩效率越来越低。gzip_comp_level2；#压缩文件类型。gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/cssapplication/xmltext/javascript;#打开后，如果能找到.gz文件，则直接返回文件，不会进行服务端压缩启用。gzip_staticon|off#是否添加响应头Vary:Accept-Encoding建议开启。gzip_varyon;#请求压缩的buffer数量和大小，以4k为单位，32的倍数。gzip_buffers324K；如果Nginx没有开启gzip，前端在打包的时候可以打包一个压缩版的资源，Nginx也会把压缩后的文件传给浏览器。首先安装一个插件yarnaddcompression-webpack-plugin，然后在vue.config.js中Configurethisplugin，配置如下//vue.config.js的基本配置constCompressionPlugin=require('compression-webpack-plugin')module.exports={//将部署应用程序包的基本URL（在VueCLI3.3之前调用了baseUrl）publicPath:"./",outputDir:"dist",assetsDir:"assets",//静态资源目录（js、css、img、fonts）productionSourceMap:false,//生产环境sourceMap，不生成map文件lintOnSave:false,//关闭eslintdevServer:{open:true,},configureWebpack:config=>{if(process.env.NODE_ENV==='production'){//判断是生产环境return{plugins:[newCompressionPlugin({algorithm:'gzip',//启用gziptest:/\.js$|\.html$|.\css/,//匹配文件名阈值:10240,//是数据压缩超过10kdeleteOriginalAssets:false//不删除源文件})]}}}}4.不删除生成地图文件。生产环境不需要map文件，开发环境可以保留。它只需要在vue.config中。js文件，添加productionSourceMap:false就够了。5.图片压缩插件image-webpack-loader最好用cnpm安装，不然容易卡死。cnpminstall--save-devimage-webpack-loader在vue.config.js对象中配置如下chainWebpack:config=>{config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug:true}).end()}(附件)优化moment.js，使用IgnorePlugin插件配置如下constwebpack=require('webpack')configureWebpack:config=>{if(process.env.NODE_ENV==='production'){return{plugins:[newwebpack.IgnorePlugin(/^\.\/locale$/,/moment$/),//忽略/moment/locale下的所有文件]}}}（附）优化lodash使用lodash-webpack-pluginpluginyarnaddlodash-webpack-pluginconstLodashModuleReplacementPlugin=require('lodash-webpack-plugin')configureWebpack:config=>{if(process.env.NODE_ENV==='production'){return{plugins:[newLodashModuleReplacementPlugin(),//优化lodash]}}}（附）完成vue.config.js文件//vue.config.js的基本配置constmoment=require('moment')constCompressionPlugin=require('compression-webpack-plugin')constLodashModuleReplacementPlugin=require('lodash-webpack-plugin')constwebpack=require('webpack')process.env.VUE_APP_VERSION=`${moment().format('YYYY.MM.DD')}.${moment().valueOf()}`module.exports={//将部署应用程序包的基本URL（在VueCLI3.3之前调用baseUrl）publicPath:"./",outputDir:"dist",assetsDir:"assets",//静态资产目录（js,css,img,fonts)productionSourceMap:false,//生产环境sourceMaplintOnSave:false,//关闭eslintdevServer:{open:true,},configureWebpack:config=>{if(process.env.NODE_ENV==='production'){return{plugins:[newCompressionPlugin({algorithm:'gzip',//启用gzip测试:/\.js$|\.html$|.\css/,//匹配文件名阈值：10240,//更多超过10k的数据压缩deleteOriginalAssets:false//不删除源files}),newwebpack.IgnorePlugin(/^\.\/locale$/,/moment$/),//忽略/moment/locale下的所有文件newLodashModuleReplacementPlugin(),//优化lodash]}}}}(附)完整的bable.config.js文件module.exports={presets:['@vue/app'],plugins:[['import',{libraryName:'vant',libraryDirectory:'es',style:true},'vant'],['component',{libraryName:'element-ui',styleLibraryName:'theme-chalk'}]]}
