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

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

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

具体配置

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const smp = new SpeedMeasurePlugin({
 outputFormat:"human",
});
module.exports = {
configureWebpack: smp.wrap({
  plugins: [
   new webpack.ProvidePlugin({
    $: "zepto",
    Zepto: "zepto",
   }),
   new BundleAnalyzerPlugin(),
  ],
  optimization: {
   splitChunks: {
    cacheGroups: {
     echarts: {
      name: "chunk-echarts",
      test: /[\\/]node_modules[\\/]echarts[\\/]/,
      chunks: "all",
      priority: 10,
      reuseExistingChunk: true,
      enforce: true,
     },
     demo: {
      name: "chunk-demo",
      test: /[\\/]src[\\/]views[\\/]demo[\\/]/,
      chunks: "all",
      priority: 20,
      reuseExistingChunk: true,
      enforce: true,
     },
     page: {
      name: "chunk-page",
      test: /[\\/]src[\\/]/,
      chunks: "all",
      priority: 10,
      reuseExistingChunk: true,
      enforce: true,
     },
     vendors: {
      name: "chunk-vendors",
      test: /[\\/]node_modules[\\/]/,
      chunks: "all",
      priority: 5,
      reuseExistingChunk: true,
      enforce: true,
     },
    },
   },
  },
 })
}

由于是基于vue-cli脚手架的，所以其实vue-cli中已经帮你做了一些优化的工作，可以看到，原先项目最初的配置设置了splitchunk，进行代码分割，这在大型项目中是很有必要的，毕竟你不希望你的用户阻塞加载一个5MB大小的JS文件，所以做代码分割和懒加载是很有必要的。

说远了，我们来看看这个配置，你需要用smp对配置进行再包裹，因为SpeedMeasurePlugin会对你的其他Plugin对象包裹一层代理，这样的目的是为了能够知道plugin开始和结束的时间~

其次，BundleAnalyzerPlugin就跟普通的plugin一样，加载plugins数组的后面即可。

接下来我们看一下最初的打包时间以及包内容分析：

可以看到项目中较大的三个包，其中两个包是我们的第三方依赖，three.js、lottie、lodash、echarts等。

2、开始逐步优化

2.1缩小文件查找和处理范围

这是webpack优化中的常规操作，基本就是对模块和文件查找的优化，以及减少loader对一些不必要模块的处理，但是vue-cli中的loader并没有暴露给我们操作，所以其内置的loader处理无法由我们进行优化，但是其实vue-cli中的配置项已经对loader的查找路径进行了优化，如果你的项目也是使用了vue-cli，你可以通过以下命令行查看你现有的配置文件是怎样的：