如何深入探索基于vue-cli的webpack打包优化实践技巧？

本文共计3114个文字，预计阅读时间需要13分钟。

转瞬已是2019年，短短三四年时间，webpack打包工具已成为前端开发中必备的工具。曾经一度，面试题中都会问到，请问前端页面优化的方式有哪些？大家也都是信心满满地答出缓存、压缩等策略。

转眼已经是2019年，短短三四年时间，webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？大家也是能够信手拈来的说出缓存、压缩文件、CSS雪碧图以及部署CDN等等各种方法，但是今天不一样了，可能你去面试问的就是，请问你是否知道webpack的打包原理，webpack的打包优化方法有哪些？所以该说不说的，笔者闲着没事研究了一下webpack的打包优化，可能大家都有看过类似的优化文章~ 但是笔者还是希望能够给大家一些新的启发~

1、准备工作：测速与分析bundle

既然我们要优化webpack打包，肯定要提前对我们的bundle文件进行分析，分析各模块的大小，以及分析打包时间的耗时主要是在哪里，这里主要需要用到两个webpack插件，speed-measure-webpack-plugin和webpack-bundle-analyzer，前者用于测速，后者用于分析bundle文件。