1.打包优化主要是通过对比打包后的文件和代码加载来进行优化。1.未优化时打包文件的大小。2.粗略查看了一下,发现包里有比较大的图片,ok,压缩!首先查看脚手架的默认webpack配置vueinspect>output.jsonlyusesurl-loadertoprocesssmallerfiles/*output.js*//*config.module.rule('images')*/{test:/\.(png|jpe?g|gif|webp)(\?.*)?$/,使用:[/*config.module.rule('images').use('url-loader')*/{加载器:'/Users/joy/Documents/CodeSpace/aship/fe_vue_cms(4)/node_modules/url-loader/dist/cjs.js',options:{limit:4096,fallback:{loader:'/Users/joy/Documents/CodeSpace/aboat/fe_vue_cms(4)/node_modules/file-loader/dist/cjs.js',options:{name:'img/[name].[hash:8].[ext]'}}}},/*config.module.rule('images').use('image-webpack-loader')*/{loader:'image-webpack-loader'}]},然后对于大图片Image-webpack-loader需要配置cnpminstallimage-webpack-loader--save-dev注意这里最好使用cnpm安装。我用npm安装运行报错。配置如下:/*vue.config.js*/chainWebpack:config=>{config.module.rule('images').使用('image-webpack-loader').loader('image-webpack-loader').end()},查看dist是否明显压缩,可以对比前后img文件,会发现一些压缩后文件变小转换为base64后续更新3,
