目录：
前言
1、删除多余包/模块
2、antd按需加载
3、使用图片压缩
前言：之前使用React+antd-mobile编写的项目已经打包上线了。 目前正在对其进行一系列的优化，首当其冲的就是Webpack相关的优化。 Webpack的优化主要集中在两点：
1）装箱量的优化webpack 图片优化，最重要的环节之一，直接影响项目页面的加载率
2）打包率的优化主要影响开发效率的环节
本文负责记录我在使用Webpack进行打包体积优化方面所做的所有工作和成果。
优化前需要分析优化前项目的包装体积以及各部分占用的体积
这里使用了webpack-bundle-analyzer插件，可以分析包的总体积、各个组件的体积、以及导入的第三方依赖的体积。
yarn add webpack-bundle-analyzer -D
这样就可以看到：8888中各部分的体积
从上图我们可以看到antd-mobile、react-dom、chunk.js等都是抢占能力特别大的模块，也是我们这次优化的重点。
本次优化前的包大小为：4.72M，因此开始优化。
1.删除多余的包和模块
运行项目时，可以通过浏览器调试警告看到项目中引入但未使用的模块、包或变量。 可以删除这些以优化包装体积。 这是优化的第一步：
2.antd按需加载
我们引入antd模块，都是默认导入的webpack 图片优化，实际使用的只是我们项目中用到的几个模块。 我在项目中使用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 来匹配并压缩所有图片。
npminstallimage-webpack-loader-D
需要在Webpack.config.js中进行相关配置：
// install
npm i image-webpack-loader -D
// vue.config.js
chainWebpack: (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()
}
}
4.将图片转换为Webp
Webp图像具有体积小、帧率高的特点，打包过程中图像的转换可以通过imagemin-webpack-plugin插件实现。
引入模块
const ImageminWebP = require('imagemin-webp')
const ImageminPlugin = require('imagemin-webpack-plugin').default
const CopyWebpackPlugin = require('copy-webpack-plugin')
插件部分
plugins: [
// 打包体积
new BundleAnalyzerPlugin(),
// 图片转webp
new CopyWebpackPlugin([
{
from: '../public/images/**/**',
to: '../public/images/[name].webp',
},
]),
new ImageminPlugin({
// imagemin-webp docs: https://github.com/imagemin/imagemin-webp
plugins: [ImageminWebP({ quality: 50 })],
}),经过一系列优化，打包体积达到3.92M。 虽然还是不小，但是相比一开始还是有很多改进的，以后还会继续改进的！
