webpack打包体积优化，app.js文件从9.2MB优化至2.7MB

未优化前app.js文件大小

未优化前app.js文件大小为9.2MB

写一个webpack插件，找出size比较大的module

class WebpackCustomPlugin {
    compiler.hooks.done.tap('', (stats) => {
        const chunks = stats.compilation.chunks
        chunks.forEach(chunk => {
            consone.log(chunk.id, chunk.files)
            const newModules = []
            // 遍历组合成chunk的modules，将一些需要的数据放入到数组中
            for(const module of chunk._modules) {
                newModules.push({
                    id: module.id,
                    resource: module.resource,
                    _sourceSize: module._sourceSize,
                    reasons: module.reason[0]?.module?.id
                })
            }
            // 对newModules数组按大小排序
            newModules.sort((a, b) => b._sourceSize - a._sourceSize)
            if (chunk?.id.toString().indexOf('app') > -1) {
                console.log(newModules.slice(0, 20))
            }
            
        })
        
    })
}

优化1

src/theme/index.less文件大小706977，定位到该文件，发现语句@import '~ant-design-vue/dist/antd.less'，项目已经按需加载ant-design-vue，所以只需要删除该语句。删除后app.js大小为7.5MB。

优化2

一个大小为26943的TableSetting.vue组件全局引入了，但没有地方使用，所以删除。删除后app.js大小为7.4MB

优化3

将个别页面使用到的组件，从main.js文件移除注册，优化后，app.js文件大小为6.8MB。

优化4

发现很多大的图片，都被打包到了app.js中

设置url-loader的阀值为8KB，即超过8K大小的图片文件不会转换为 DataURL。

优化后app.js文件大小为2.7MB

原来app.js文件里面大部分都是图片的大小！！！