webpack根据性能分析图优化打包

一、 webpack生成性能分析图

1. vue2.x中检查webpack.prod.conf.js中是否有以下代码，如果有以下代码，则直接走第四步，如果没有以下代码，则继续往下阅读。如果你是vue3.x，也同样往下阅读。

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

2.执行npm install webpack-bundle-analyzer --save安装webpack-bundle-analyzer模块，并在webpack.prod.conf.js文件中加以下代码

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

3. 在config文件夹下打开index.js文件，加上以下代码

build: {
        //  ... 省略已经存在的代码，加上下面的配置项
        bundleAnalyzerReport: !!process.env.npm_config_report
}

4. 在package.json的scripts这个key中加上以下命令

"scripts": {
        "analyz": "npm_config_report=true npm run build"
},

以上注意点
（1）以上代码配置好了之后，在终端输入npm run analyz命令，浏览就会自动打开127.0.0.0:8888页面，出现打包的性能分析图
（2）如果，执行了npm run analyz命令，浏览器并没有出现打包的性能分析图，那么就要看在执行命令npm run analyz的时候有没有走进if (config.build.bundleAnalyzerReport) {}这个条件中，如果没有走进去的话，那浏览器端是不可能出现性能图的。可以试着将webpack.prod.conf.js文件中的if条件判断写死，if (true) {}，那么打包的时候就肯定会走进这个条件判断中，那么性能图就会出现在浏览器中
（3）流程梳理：看下面的指向图

流程梳理图

二、分析性能图

1. 项目生成的性能分析图如下(感觉好杂乱，慢慢梳理)

性能分析图

这些红色橙色，说明打包后的js文件比较大，重点分析这些红色，橙色的js文件。这些红色橙色的文件中，都有一个叫moment的模块，占据了超过二分之一的体积。还有一些重复加载的模块...

2. 打包后的js文件大小，重点看一下上百kb大小的文件

上百kb的文件

一个页面三位数大小的文件，对于一个页面来说可能是大了点（捂脸哭），看看这些性能分析图吧。有些模块加载了两三次甚至更多次、有些模块本身就很大、有些页面引入组件太过累赘。我们主要做的目的是减小这些打包后的js文件大小。

三、根据分析性能图，做出优化

1. 检查有重复引入组件的嫌疑

重复引入的组件例

此模块在全局中就引入这个组件，但是在每个单独的页面，依然还是引入这个微信的sdk文件，这个就可以优化了。不仅仅是这一个组件重复引入了。依次检查是否有重复引入的文件，依次排查，干掉它们。

2. 将引用超过两次的模块，单独剥离开

就着重看一下这个最大的4.xxx.js，438kb这个文件吧。分析这个文件来看看如何优化打包后的js文件
（1）4.xxx.js文件性能分析图

4.xxx.js文件性能分析图

分析图分为两个部分，左边是模块打包，右边是文件代码的打包。一眼看过去，就是左边的模块是不是占据太大了。而且我整体看了一下，这些打包比较大的文件都是模块node_modules占据很大的空间，需要优化了。
看到网上都说可以配置：超过两次引用的文件可以收集起来，只打包一次，那我们就来试试看吧。
（2）在webpack.prod.conf.js文件中plugins中加入下面的代码，然后重新执行npm run analyz命令

new webpack.optimize.CommonsChunkPlugin({
    async: 'used-twice',
    minChunks: (module, count) => (
      count >= 2
    )
})

重新打包的分析图

打包的文件确实小了很多，但是0.xxx.js文件1.38M冒出来了，而且这个1.38M的文件每个页面都会加载这个js，我看了一下这个1.38M的打包的文件都是用了两次以上的包的集合。额...但是每个页面都要加载这个js的文件，不能接受。可不可以使用缓存机制，但是我们线上设置了前端不缓存这个bug。
（3）继续分析，看了一下之前的性能分析图，那些红色橙色的文件都包含了moment这个模块，去项目中看看这个moment模块，不看不知道，一看吓一跳，这个模块居然是用来格式化时间的，一万个为什么，为什么要引入时间格式化的模块，时间格式化的js，网上一说一大把，不知道之前的开发人员是怎么想的。
如何优化，那就是让相关引用moment模块的开发人员，自己抽出一个公用方法，将这个moment模块给去掉，不能使用这个模块。坚决不可以使用这个模块。干掉moment模块。

moment模块带来的灾难

3. 路由懒加载

按需加载路由组件，按照以下的代码进行修改
路由文件旧文件

import ShowBlogs from '@/components/ShowBlogs'
routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]

改成下面的形式，按需加载

routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

小提示：我按照这种形式，打包后的文件，确实减了很多体积，但是main.js文件为什么还变大了，有待我分析其中的疑点。

以上是我对性能分析图的分析，有啥不对的地方，欢迎指正

参照文章
Webpack 大法之 Code Splitting
前端开发