- 如何分析构建产物?
1.使用分析工具:例如
webpack-bundle-analyzer/source-map-explorer
,展示所有模块的组成、大小和依赖 2.定位体积异常的模块:在分析工具或者 console 面板能够查看 bundle 体积的大小,找到明显异常的模块,分析是否引入了大型库、是否没有按需引入等问题 3.查找重复打包的问题:查看是否有多个 bundle 引入了相同模块,可以通过配置splitChunks.cacheGroups
提取公共模块
1.使用分析工具:例如
webpack-bundle-analyzer/source-map-explorer
,展示所有模块的组成、大小和依赖 2.定位体积异常的模块:在分析工具或者 console 面板能够查看 bundle 体积的大小,找到明显异常的模块,分析是否引入了大型库、是否没有按需引入等问题 3.查找重复打包的问题:查看是否有多个 bundle 引入了相同模块,可以通过配置splitChunks.cacheGroups
提取公共模块