项目中svg-icon使用过多，导致webpack打包之后，main.js体积多大，怎么优化?

Question

项目中使用了比较常见的svg封装方式，如下图所示

打包之后入口js文件比较大，1.5MB,点开一看好像把很多svg都编码进去了

这会影响到首屏加载速度吧，我希望svg进入页面之后再按需加载，怎么优化呢

Answer 1

肯定有影响，把图片文件摘出来呗。不知道你用哪个版本的 webpack，都不复杂，如果是 5 的话，静态文件的支持是内建的，直接用就可以：https://webpack.js.org/guides/asset-management/#loading-images

Answer 2

你的webpack配置的感觉有点问题。webacpk5以后对img，这类前端资源不需要额外安装loader解析，用内置的资源模块去解析。

根据你的配置，改成下面这种试一下：

// 解析img等资源
{
    test: /\.(png|jpg|jpeg|gif)$/i,
    type: 'asset',
    // 设置图片导出大小，如果小于预设的值，则会被转化成base64
    parser: {
        dataUrlCondition: {
            maxSize: 1 * 1024
        }
    },

    // 设置导出的路径为 img
    generator: {
        filename:  `content/images/[name]-[hash:5][ext][query]`,
    }
},
// 解析svg
{
    test: /\.svg$/i,
    type: 'asset',

    // 设置字体导出大小，如果小于预设的值，则会被转化成base64
    parser: {
        dataUrlCondition: {
            maxSize: 1 * 1024
        }
    },

    // 设置导出的路径为 font
    generator: {
        filename:  `content/font/[name]-[hash:5][ext][query]`,
    }
},
// 解析svg
{
    test: /\.svg$/i,
    type: 'asset/resource',
},

这里提供的是个参考，具体看看文档资源模块去解析。