【内推字节】欢迎简历chengxinsong@bytedance.com
webpack-bundle-analyzer的使用和作用
发布于 作者 suning 182 次浏览 来自 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交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11