FreeBuf.COM网络安全行业门户，每日发布专业的安全资讯、技术剖析。

分析原项目

通过安装 webpack-bundle-analyzer 插件来分析

npm install --save-dev webpack-bundle-analyzer

webpack.js中增加

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [

// Bundle分析器插件 - 只在ANALYZE环境变量为true时启用

...(process.env.ANALYZE ? [

new BundleAnalyzerPlugin({

analyzerMode: 'server', // 启动本地服务器显示分析结果

analyzerHost: '127.0.0.1',

analyzerPort: 8888, // 分析服务器端口

reportFilename: 'report.html', // 报告文件名

defaultSizes: 'parsed', // 显示解析后的大小

openAnalyzer: true, // 自动打开浏览器

generateStatsFile: true, // 生成stats.json文件

statsFilename: 'stats.json', // stats文件名

statsOptions: null,

logLevel: 'info' // 日志级别

})

] : [])

]

package.json中增加"build:analyze": "xxx ANALYZE=true webpack xxxx"

npm run analyze

构建完成后自动打开浏览器 http://127.0.0.1:8888，同时生成HTML报告和JSON统计数据。

这个项目中assets文件体积占比达67%，多为svg文件，字体文件占12.1MB，可以跟后端沟通把大量的svg将SVG静态资源迁移至公司CDN或者文件服务器。

当前打包用时194046ms，原始配置只有3个主要chunk (vendors, common, index)。

配置优化

svg配置优化

项目中使用的是SVG sprite模式，通过<use xlinkHref={#${name}} />来引用SVG，不能把svg当做文件资源这样来输出。

type: 'asset/resource',

generator: {

filename: 'assets/svg/[name][ext]',

},

可以使用svg-sprite-loader来优化，提取成一个文件

{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
symbolId: '[name]',
extract: true,
spriteFilename: 'assets/svg/sprite.svg',
publicPath: '/' // 确保路径正确
}
},
{
loader: 'svgo-loader',
options: {
plugins: [
{ name: 'removeViewBox', active: false },
{ name: 'removeDimensions', active: true },
]
}
}
]
}

使用时也要修改为使用sprite中的图标

<svg>
<use xlink:href="/assets/svg/sprite.svg#icon-name"></use>
</svg>

因为我这里项目的使用地方比较杂，所以不提取成一个文件。

原始配置是

{

test: /\.svg$/,

use: [

{

loader: 'svg-sprite-loader',

options: {}

},

{

loader: 'svgo-loader',

},

]

},

没有明确symbolId命名，svgo-loader使用默认的20+个优化插件，时间耗时较长，但是包体积有所减少。

如果只选取几个插件，会降低打包时间至125113 ms，但打包体积却提升至40.3 MB。此时问AI哪些插件优化了打包体积时，他的回答经过验证是错误的，且多次坚定自己的错误回答。我自己多次尝试后的结论如下：

• moveElemsAttrsToGroup：打包体积降低0.6 MB左右，打包时间增加小于10 s；
• conver

本文为 独立观点，未经授权禁止转载。
如需授权、对文章有疑问或需删除稿件，请联系 FreeBuf 客服小蜜蜂（微信：freebee1024）