之前写过一篇 webpack打包优化方向指南(理论篇) 的文章，在末尾说是下一篇给大家带来打包实践的文章，是我食言了，主要是因为一没有好的问题分享给大家，所以一直耽误了！
这篇文章的起因是我们项目组接了之前一个老的项目，这个项目据了解是急匆匆东拼西凑的一个项目，里面的代码就不提了，懂得都懂！！，某天老大叫我看了一下他强刷页面，开发环境下 app.js 竟然 50+ MB，我靠！这直接不能忍啊，然后就有了这篇文章。
整体分析
有了需求，所以我们的目标很明确！就是让打包后的app.js文件尽可能小。 所以下载工具先分析。
下载 Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
...
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()],
},
...
安装好插件之后我们打个开发环境的包来试试！请看下图：
查看打包文件大小
从图中我们可以看到在app这个打包文件中主要有两个较大的包， 一个是样式文件，一个是node_modules的第三方包，所以我们的 思路就是将 样式 和 node_modules 从app文件中剥离出来，单独放一个文件。接下来我们开干！！。
剥离 node_modules
我们使用optimization 中的splitChunks 将我们带 文件进行拆分优化， chunks我们设置为 ‘all’， 如果你还想查看更多请点击链接查看 具体的 splitChunks。
因此优化我们的配置：将chunks设置为"all"
configureWebpack: {
optimization: {
splitChunks: {
chunks: "all",
},
},
},
优化完毕我们现在来运行开发环境的打包命令查看打包文件。
从图中我们可以看到，第三方的包已经从我们的app文件中剥离出来了，目前我们的打包文件为27.54MB，这个现在还远远达不到我们想要的要求。在图中还可以看到，我们的样式依然占据了很大的一部分空间，接下来我们剥离css样式
剥离样式文件
样式文件的剥离有很多中写法，例如使用 mini-css-extract-plugin 这个插件，在例如就是我们目前的写法，使用缓存组进行一个样式上的剥离。 如果你想查看更多请点击链接查看。
我们继续优化书写如下配置：
configureWebpack: {
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
styleStripping: {
name: "styleStripping",
test: /\.(c|sc)ss$/,
chunks: "all",
enforce: true,
},
},
},
},
},
优化完毕我们现在来运行开发环境的打包命令查看打包文件。
我么从图中可以看到 样式文件已经剥离出来了，我们的打包过后的app文件大小为4.2MB。至此我们完成了目标！ 这是优化项目的开发环境的app文件，生产环境的打包文件我查看过暂时不需要优化。
其实我们还可以继续优化打包速度，将 Echarts，G2, highcharts,moment,这种占用空间较大的包做成Dll动态链接库，或者可以借助 externals 使用CDN链接。压缩CSS，压缩JS，懒加载，等等。 你如果还想要继续了解关于打包优化方面的推荐你阅读这篇文章。
