webpack打包性能優化之路

性能優化的路沒有窮盡，只有更快。打開頁面越快越好，點擊響應越快越好。在當今這個以快爲主的時代，快纔是王道。閒話扯完，說正事！！！

該優化方案以最近做的一個hybrid webapp爲實例演示。

路由懶加載

（1）vue-router文件中的router使用懶加載方式。如下圖所示

（2）在vue文件中，也採用類似方式引入其他vue組件

const showImage = () => import('@/components/common/showImage');

這個優化的方式在vue官網也有介紹，傳送門

啓用gzip壓縮和關閉sourcemap

所有現代瀏覽器都支持 gzip 壓縮並會爲所有 HTTP 請求自動協商此類壓縮。啓用 gzip 壓縮可大幅縮減所傳輸的響應的大小（最多可縮減90%），從而顯著縮短下載相應資源所需的時間、減少客戶端的流量消耗並加快網頁的首次呈現速度。 如下圖所示

如果你使用的是vue-cli2生成的項目的話，在config文件夾下的index.js中可以找到這段代碼。記得開啓gzip壓縮前要安裝一個插件，如途中註釋掉的一段代碼所示。

生產環境去掉console代碼，減少代碼體積，使用uglifyjs壓縮代碼

圖片優化

對於網頁來說，在所下載的字節數中，圖片往往會佔很大比例。因此，優化圖片通常可以卓有成效地減少字節數和改進性能：瀏覽器需要下載的字節數越少，對客戶端帶寬的爭用就越少，瀏覽器下載內容並在屏幕上呈現內容的速度就越快。
儘量減少圖片的使用，或者使用css3來代替圖片效果。如果不行的話，小圖片通過一定的工具合成雪碧圖或者轉成base64。

引用的庫儘量按需加載。

(1)像一般的ui庫element，vant等庫都提供來按需加載的方式，避免全部引入，加大項目體積。
(2)以cdn方式載入需要的庫，也可以減少打包後的體積。
在index.html文件中

引入mintui

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>

引入vue

<!-- 開發環境使用此方案-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 生產環境使用此方案 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

以這種外鏈方式引入mint-ui和vue後，需要做些別的配置
（1）在入口文件main.js 中就不需要引入vue和mintui了
（2）在buildwebpack.base.conf.js中添加如下配置，意爲打包的時候不打包vue和mint-ui。

externals:{
  "mint-ui":"mintui",
  "vue":"Vue"
},

使用DllReferencePlugin

將平時不經常變動的文件抽離出來，統一打包，這樣也可以減少後續打包的時間。

• 在build文件夾中新建一個webpack.dll.conf.js.

const path = require('path')
const webpack = require('webpack')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    vendor: [
        //根據實際情況添加
      'axios',
      'vue/dist/vue.min.js',
      'vue-router',
      'vuex',
      'mint-ui'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules\/(?!(autotrack|dom-utils))/
      }
    ]
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false // set to true if you want JS source maps
      }),
      // Compress extracted CSS. We are using this plugin so that possible
      // duplicated CSS from different components can be deduped.
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  plugins: [
    /*
      @desc: https://webpack.js.org/plugins/module-concatenation-plugin/
      "作用域提升(scope hoisting)",使代碼體積更小[函數申明會產生大量代碼](#webpack3)
    */
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
}

• 在package.json中增加配置

"scripts": {
    "build:dll": "webpack -p --progress --config build/webpack.dll.conf.js"
  }

執行npm run build:dll命令就可以在根目錄下生成vendor-manifest.json,static/js下生成vendor.dll.js

• 在webpack.base.conf.js中增加如下

const manifest = require('../vendor-manifest.json')

....

plugins: [
   //把dll的vendor-manifest.json引用到需要的預編譯的依賴
   new webpack.DllReferencePlugin({
     manifest
   })
]

• 在index.html底部添加

<script src="./static/js/vendor.dll.js"></script>

目前在項目中做的優化就是這些，還是那句話，性能優化的路沒有窮盡，只有更快。

參考文章

（1）https://blog.csdn.net/blueber...
（2）https://developers.google.com...
（3）https://www.jeffjade.com/2017...