这里介绍一些常用的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文件过大，需要优化