如何通過性能優(yōu)化，將包的體積壓縮了 62.7%（附代碼）

- 打包階段    - 第一步：安裝speed-measure-webpack-plugin    - 第二步：安裝cache-loader    - 第三步：安裝happypack    - 第四步：安裝webpack-parallel-uglify-plugin    - 打包總結(jié)- 上線優(yōu)化階段    - 第一步：基礎優(yōu)化    - 第二步：路由懶加載和按需引入    - 第三步：優(yōu)化代碼和合并相同的包    - 第四步：在服務器上的優(yōu)化    - 上線優(yōu)化總結(jié)- 最后優(yōu)化總結(jié)

打包階段

第一步：安裝speed-measure-webpack-plugin

 安裝包版本："speed-measure-webpack-plugin": "^1.5.0"

該安裝包的作用：在打包的過程中，能夠精確的幫你分析出每一個步驟耗費的時間，然后我們可以針對時間比較長的部分專門做優(yōu)化。

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");const smp = new SpeedMeasurePlugin();const webpackConfig = smp.wrap(merge(baseWebpackConfig, {        ...    }))

第二步：安裝cache-loader

 安裝包版本："cache-loader": "^4.1.0"

對sass-loader、postcss-loader、vue-loader做打包緩存，縮短打包的時間。

const cacheLoader = {  loader: 'cache-loader'}rules: [  {    test: /\.vue$/,    use: [      cacheLoader,      {        loader: 'vue-loader',        options: vueLoaderConfig      }    ]  },  ......  {    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,    use: [      cacheLoader,      {        loader: 'url-loader',        options: {          limit: 10000,          name: utils.assetsPath('img/[name].[hash:7].[ext]')        }      }    ]  }

const loaders = options.usePostCSS ? [cacheLoader, cssLoader, postcssLoader] : [cacheLoader, cssLoader]

第三步：安裝happypack(當前項目太小，沒有起到效果，當時后端管理項目有優(yōu)化效果)

 安裝包版本："happypack": "^5.0.1"

可以在打包的時候開啟多線程打包。使用鏈接如下：www.npmjs.com/package/happypack

第四步：安裝webpack-parallel-uglify-plugin

 安裝包版本："webpack-parallel-uglify-plugin": "1.1.0"

用上圖中可以看到UglifyJsPlugin這個包的打包時間太長，我想到可以使用webpack-parallel-uglify-plugin這個包，開啟多核同步壓縮增加壓縮的效率。

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');new ParallelUglifyPlugin({      uglifyJS: {        output: {          beautify: false, // 是否保留空格和制表符，設置為不保留          comments: false, // 是否保留代碼中的注釋，設置為不保留        },        compress: {          drop_console: true, // 是否刪除代碼中的console語句，設置為刪除          collapse_vars: false, // 是否內(nèi)嵌雖然已經(jīng)定義了，但是只用到一次的變量，設置為不使用          reduce_vars: false, // 是否提取出現(xiàn)了多次但是沒有定義成變量去引用的靜態(tài)值，設置為不轉(zhuǎn)換        },        warnings: false // 是否在刪除沒有用到的代碼時輸出警告信息，設置為不警告      },  }),

打包總結(jié)

上線優(yōu)化階段

安裝webpack-bundle-analyzer

• 打開分析有2種方式：
• 方式1：在plugins中做默認配置new BundleAnalyzerPlugin()，然后執(zhí)行npm run dev的時候，會自動彈出一個頁面，然后再頁面中查看每個包的大小
• 方式2：在plugins中做進行配置，會生成一個stats.json文件，執(zhí)行webpack --profile --json > stats.json命令生成分析文件，執(zhí)行webpack-bundle-analyzer --port 8888 ./dist/stats.json展示各個包的體積頁面。

// webpack.config.jsconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginplugins: [    new BundleAnalyzerPlugin({      analyzerMode: 'disabled', // 不啟動展示打包報告的http服務器      generateStatsFile: true, // 是否生成stats.json文件    })]
// package.json"generateAnalyzFile": "webpack --config build/webpack.dev.conf.js --profile --json > stats.json", // 生成分析文件"analyz": "webpack-bundle-analyzer --port 8888 ./stats.json" // 啟動展示打包報告的http服務器

第一步：基礎優(yōu)化

1. 盡量減少HTTP請求數(shù)
2. 減少DNS查找
3. 避免重定向
4. 讓Ajax可緩存
......
35. 添上Expires或者Cache-Control HTTP頭

第二步：路由懶加載和按需引入

1、路由懶加載

{  path: '/',  name: 'TopicList',  component: import('@/components/TopicList')}

2、組件的按需引入

import {  Header,  Button} from 'mint-ui'Vue.use(Header)Vue.use(Button)

第三步：優(yōu)化代碼和合并相同的包

1. 對這些包進行分析并優(yōu)化

//解決moment打包的時候把所有的語言都打包進去的問題new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn)$/)

// 這部分引入了，但是沒使用，要刪除import moment from 'moment'

2.然后是對moment.js包配置，讓其只打包一次。

// main.jsimport moment from 'moment'Vue.prototype.$moment = moment
// TopicList.vueconst date1 = this.$moment(date).fromNow(true)

第四步：在服務器上的優(yōu)化

1. 圖片和其他文件進行無損壓縮，并上傳到cdn上

2. nginx配置開通gzip,從線上拉取的代碼能壓縮2/3

上線優(yōu)化總結(jié)

最后優(yōu)化總結(jié)

• 在打包階段，打包時間整個打包過程從9.95秒，減少到6.52秒，打包優(yōu)化效率提高了35% 。
• 在上線前的優(yōu)化階段，從最初的體積是3.14MB，減少到1.17MB，優(yōu)化效率在62.7% ，挺不錯的結(jié)果。