【内推字节】欢迎简历chengxinsong@bytedance.com
webpack-bundle-analyzer的使用和作用
发布于 作者 suning 803 次浏览 来自 webpack

这里介绍一些常用的webpack打包优化解决方案

  1. 使用插件查看项目所有包及体积大小

查看项目打包

webpack有个插件,可以查看项目打包,每个包的体积,每个包里面的包一些情况。首先下载插件

npm intall webpack-bundle-analyzer --save-dev

其次项目中配置(webpack.prod.conf.js文件中配置)

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

再次运行命令

npm run build-report

就可以查看项目的打包情况。从而优化包体积


看来是加载emoji表情包的js文件过大,需要优化

发布评论
微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!