記一次webpack打包優化

未進行打包優化的痛點：

　　隨着項目的不斷擴大，引入的第三方庫會越來越多，我們每次build的時候會對所有的文件進行打包，耗時必定很長，不利於日常開發。

解決思路：

　　第三方庫我們只是引入到項目里來，一般不會經常性的去修改源碼，一般都是在src目錄下編寫業務代碼，因此可以把第三方依賴和src分開打包。

　　每次build的時候我們只需要把之前build好的第三方依賴文件引入到項目中即可，避免了我們每次build的時候都會build第三方依賴。

　　當第三方依賴發生改變的時候我們只需要把第三方依賴再build一次就行。

步驟一：構建項目 引入第三方依賴

## 初始化項目

vue init webpack webpack-test
cd dll-test

## 安裝基礎配置包

npm install

## 安裝依賴模塊（第三方靜態資源）

npm install vuex vue-router axios lodash element-ui  vue-bus iview  --save

 

安裝完成后再package.json中可查看到對應的資源

 

　　main.js中引入第三方資源

 

　　

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import VueBus from 'vue-bus'
import lodash from 'lodash'
import vuex from 'vuex'
import ElementUI from 'element-ui'
import axios from 'axios'
import vueRouter from 'vue-router'

Vue.config.productionTip = false

Vue.use(iView)
Vue.use(ElementUI)
Vue.use(VueBus)
Vue.use(lodash)
Vue.use(vuex)
Vue.use(axios)
Vue.use(vueRouter)

看下未優化前的打包時間

22930ms差不多23s，后面項目變大，可達數分鍾。　

步驟二：使用DllPlugin插件把第三方依賴抽離出來

　　在build文件夾下(根目錄，config目錄下都可以)創建webpack.dll.conf.js

　　內容如下：

var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 你想要打包的模塊
  entry: {
    vendor: [
    'axios',
    'iview',
    'vue/dist/vue.esm.js',
    'lodash',
    'vue-bus',
    'element-ui',
    'vue-router',
    'vuex',
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
    filename: '[name].dll.js',
    library: '[name]_library' 
  },
  plugins: [
    new webpack.DllPlugin({
      //生成上文說到清單文件，此處放在當前build文件下面，你也可以放其他地方
      path: path.join(__dirname, '.', '[name]-manifest.json'), 
      name: '[name]_library'
    }),
   //壓縮 只是為了包更小一點 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉注釋內容
        comments: false,
      },
      sourceMap: true
    })
  ]
};

 

　

將第三方包抽離出來打包的腳本已經寫好了，需要編寫一條命令來執行該腳本。

package.json中scripts下加入該命令"dll": "webpack --config build/webpack.dll.conf.js"

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "dll": "webpack --config build/webpack.dll.conf.js"
  },

　　執行下npm run dll 命令將第三方依賴進行打包

　　

可以看到在項目中生成了vendor-manifest.json 和 vendor.dll.js這兩個文件

vendor-manifest.json是dllPlugin生成的資源，內容如下：

可以看到，每一個公共庫中的js文件，都會有一個對應的資源ID。

同時生成一個打包文件vendor.dll.js，一般是依賴庫， 這個文件會暴露給全局一個類似require功能的函數，這個全局函數的名字是可以配置的, 比如，可以為 vendorRequire();

 

步驟三：引入DllReferencePlugin 插件，讓在打包業務組件的時候自動引入第三方依賴打包好的資源，根據vendor-manifest.json中對應的資源id。

DllReferencePlugin 是在打包過程中使用的，在打包業務代碼時，每遇到一個在manifest.json中出現的文件，就可以利用上述 vendor.dll.js 暴露的全局函數進行相應處理，而不會把這個文件打包進來。

安裝add-asset-html-webpack-plugin插件（將打包好的endor.dll.js加入到生成的html中）

npm add-asset-html-webpack-plugin --save

在webpack.prod.conf.js中加入以下代碼：

// 將生成的css js添加到HTML文件
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

在plugins中加入如下代碼：

    // 打包優化  
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'), 
      manifest: require('./vendor-manifest.json')
    }),
    //這個主要是將生成的vendor.dll.js文件加上hash值插入到頁面中。
    new AddAssetHtmlPlugin([{
      filepath: path.resolve(__dirname,'../static/js/vendor.dll.js'),
      outputPath: utils.assetsPath('js'),
      publicPath: path.posix.join(config.build.assetsPublicPath, 'static/js'),
      includeSourcemap: false,
      hash: true,
    }]),

至此第三方依賴的抽離已完成，我們打包下看看優化后的速度。

npm run build

　　

3187ms  才3s，是不是比未優化的22930ms快多了，在項目越來越大的時候效果更明顯。

可以使用npm run build -report 來查看打包的直觀圖。

這只是一種優化的方式，還有其他可優化的部分，后續繼續添加。

趕緊去解決打包時間過長的煩惱吧。