内容：前言1.删除多余的包/模块2.antd按需加载3.使用图片压缩前言：使用React+antd-mobile写的项目已经打包上线目前计划对其进行一系列的优化，首当其冲的就是Webpack相关的优化。Webpack的优化主要集中在两点：1）打包体积的优化，最重要的环节之一，直接影响项目页面的加载速度2）打包速度的优化，主要影响开发效率这篇文章负责记录我使用Webpack在bundlesize优化方面所做的所有工作和结果。在正式优化之前，先分析一下优化前项目的打包体积，各部分占多少。这里借助webpack-bundle-analyzer插件，可以分析打包总体积、各个组件的体积以及引入的第三方依赖。体积。yarnaddwebpack-bundle-analyzer-D这样就可以在http://127.0.0.1:8888看到每个部分的体积从上图可以看出antd-mobile、react-dom和chunk.js是all是一个占体积非常大的模块，也是我们这次优化的重点。本次优化前的包大小为：4.72M，然后开始优化。1.删除多余的包和模块运行项目时，可以通过浏览器调试的警告看到项目中引入但未使用的模块、包或变量。这些可以去掉，优化打包体积，优化步骤一：2.antd按需加载我们导入antd模块，默认全部导入，但实际用到的只有我们项目中用到的几个模块。我在我的项目中使用antd-mobile。默认会有如下提示：这提醒我们引入babel-plugin-import来实现antd-mobile部分模块的引入。npminstallbabel-plugin-import--save-dev另外需要配置项目的.babelrc文件，放在src文件夹下{"plugins":[["import",{"libraryName":"antd-mobile","style":"css"}]]}引入antd点播后，打包体积有明显优化，从4.72M到4.16M3，图片压缩占用体积较大。打包时进行图片压缩，有效减少打包体积。这里image-minimizer-webpack-plugin配合imagemin一起使用，在打包时压缩图片。npminstallimage-minimizer-webpack-pluginimageminimagemin-gifsicleimagemin-jpegtranimagemin-optipngimagemin-svgo--save-dev或者简单引入image-webpack-loader匹配压缩所有图片npminstallimage-webpack-loader-DWebpack.config.js中需要配置：//installnpmiimage-webpack-loader-D//vue.config.jschainWebpack:(config)=>{if(isProd){//图片压缩处理constimgRule=config.module.rule('images')imgRule.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug:true}).end()}}4.图片转WebpWebp图片具有体积小、分辨率高的特点，可以使用imagemin-webpack-plugin插件-in实现打包过程中图片的转换。导入模块constImageminWebP=require('imagemin-webp')constImageminPlugin=require('imagemin-webpack-plugin').defaultconstCopyWebpackPlugin=require('copy-webpack-plugin')pluginpartplugins:[//packagevolumenewBundleAnalyzerPlugin(),//图片转webpnewCopyWebpackPlugin([{from:'../public/images/**/**',to:'../public/images/[name].webp',},]),newImageminPlugin({//imagemin-webpdocs:https://github.com/imagemin/imagemin-webpplugins:[ImageminWebP({quality:50})],}),经过一系列的优化，打包后的体积也达到了3.92M。虽然还是不小，但是从一开始就进步了很多，以后还会继续进步的！
