一竖席、 webpack生成性能分析圖

1. vue2.x中檢查webpack.prod.conf.js中是否有以下代碼，如果有以下代碼胧沫，則直接走第四步揍障，如果沒有以下代碼造垛，則繼續(xù)往下閱讀。如果你是vue3.x，也同樣往下閱讀。

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

2.執(zhí)行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: {
        //  ... 省略已經(jīng)存在的代碼，加上下面的配置項
        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頁面，出現(xiàn)打包的性能分析圖
（2）如果涧狮，執(zhí)行了npm run analyz命令炕矮，瀏覽器并沒有出現(xiàn)打包的性能分析圖，那么就要看在執(zhí)行命令npm run analyz的時候有沒有走進if (config.build.bundleAnalyzerReport) {}這個條件中者冤，如果沒有走進去的話肤视，那瀏覽器端是不可能出現(xiàn)性能圖的∩娣悖可以試著將webpack.prod.conf.js文件中的if條件判斷寫死邢滑，if (true) {}，那么打包的時候就肯定會走進這個條件判斷中拜银，那么性能圖就會出現(xiàn)在瀏覽器中
（3）流程梳理：看下面的指向圖

流程梳理圖

二殊鞭、分析性能圖

1. 項目生成的性能分析圖如下(感覺好雜亂，慢慢梳理)

性能分析圖

這些紅色橙色尼桶，說明打包后的js文件比較大，重點分析這些紅色锯仪，橙色的js文件泵督。這些紅色橙色的文件中，都有一個叫moment的模塊庶喜，占據(jù)了超過二分之一的體積小腊。還有一些重復(fù)加載的模塊...

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

上百kb的文件

一個頁面三位數(shù)大小的文件久窟，對于一個頁面來說可能是大了點（捂臉哭）秩冈，看看這些性能分析圖吧。有些模塊加載了兩三次甚至更多次斥扛、有些模塊本身就很大入问、有些頁面引入組件太過累贅。我們主要做的目的是減小這些打包后的js文件大小稀颁。

三芬失、根據(jù)分析性能圖，做出優(yōu)化

1. 檢查有重復(fù)引入組件的嫌疑

重復(fù)引入的組件例

此模塊在全局中就引入這個組件匾灶，但是在每個單獨的頁面棱烂，依然還是引入這個微信的sdk文件，這個就可以優(yōu)化了阶女。不僅僅是這一個組件重復(fù)引入了颊糜。依次檢查是否有重復(fù)引入的文件哩治，依次排查，干掉它們衬鱼。

2. 將引用超過兩次的模塊业筏，單獨剝離開

就著重看一下這個最大的4.xxx.js，438kb這個文件吧馁启。分析這個文件來看看如何優(yōu)化打包后的js文件
（1）4.xxx.js文件性能分析圖

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

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

重新打包的分析圖

打包的文件確實小了很多骑脱，但是0.xxx.js文件1.38M冒出來了，而且這個1.38M的文件每個頁面都會加載這個js苍糠，我看了一下這個1.38M的打包的文件都是用了兩次以上的包的集合叁丧。額...但是每個頁面都要加載這個js的文件，不能接受岳瞭∮德Γ可不可以使用緩存機制，但是我們線上設(shè)置了前端不緩存這個bug瞳筏。
（3）繼續(xù)分析稚瘾，看了一下之前的性能分析圖，那些紅色橙色的文件都包含了moment這個模塊姚炕，去項目中看看這個moment模塊摊欠，不看不知道，一看嚇一跳钻心，這個模塊居然是用來格式化時間的凄硼，一萬個為什么，為什么要引入時間格式化的模塊捷沸，時間格式化的js摊沉，網(wǎng)上一說一大把，不知道之前的開發(fā)人員是怎么想的痒给。
如何優(yōu)化说墨，那就是讓相關(guān)引用moment模塊的開發(fā)人員骏全，自己抽出一個公用方法，將這個moment模塊給去掉尼斧，不能使用這個模塊姜贡。堅決不可以使用這個模塊。干掉moment模塊棺棵。

moment模塊帶來的災(zāi)難

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
前端開發(fā)