目录：前言1、删除多余包/模块2、antd按需加载3、应用图片压缩前言：之前应用React + antd-mobile写的我的项目曾经打包上线，目前打算对其进行一系列的优化，那么首当其冲的就是Webpack相干的优化。对于Webpack的优化次要集中在两点：
1）打包体积的优化，最次要的环节之一，间接影响我的项目页面的加载速度
2）打包速度的优化，次要影响开发效力的环节
本篇文章负责记录我应用Webpack在打包体积优化方面做的所有工作和成绩。
在正式优化前，先得剖析我的项目优化前的打包体积，以及各个局部占体积的多少
这里借助 webpack-bundle-analyzer 插件，它能够剖析打包的总体积、各个组件的体积以及引入的第三方依赖的体积。
yarn add webpack-bundle-analyzer -D这样就能够在http://127.0.0.1:8888看到各局部占体积的多少
从上图能够看进去antd-mobile、react-dom 还有chunk.js等都是占据体积十分大的模块，也是咱们本次优化的重点关照对象。
本次优化前打包体积大小为：4.72M，那么开始优化。
1、删除冗余包和模块
运行我的项目时，能够通过浏览器调试的warning看到我的项目中引入，但没有应用的模块、包或变量，这些都是能够删除来优化打包体积的，这作为优化的第一步：
2、antd按需加载
咱们引入antd模块，默认是全副引入的，然而理论应用的只有咱们我的项目中应用的几个模块。我的我的项目中应用的是antd-mobile，默认状况下会有如下提醒：
这就揭示咱们引入babel-plugin-import实现antd-mobile的局部模块引入。
npm install babel-plugin-import --save-dev此外还须要配置我的项目的.babelrc文件，放入src文件夹
{ "plugins": [ [ "import", { "libraryName": "antd-mobile", "style": "css" } ] ]}按需引入antd后打包体积优化显著，从4.72M ~ 4.16M
3、图片压缩
图片占据很大的体积，在打包时进行图片压缩能无效缩小打包体积。
这里应用 image-minimizer-webpack-plugin 配合 imagemin 能够在打包时实现图片的压缩。
npm install image-minimizer-webpack-plugin imagemin imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev或者简略的引入image-webpack-loader进行全副图片的匹配压缩npm install image-webpack-loader -D
须要在Webpack.config.js中进行相干配置：
// installnpm i image-webpack-loader -D// vue.config.jschainWebpack: (config) => { if (isProd) { // 图片压缩解决 const imgRule = config.module.rule('images') imgRule .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() }}通过一系列的优化之后，打包后的体积也达到了 3.92M 的大小，尽管仍不算小，然而比一开始还是有了不少改良，后续还会持续晋升！