2. 程式人生 > >webpack-DllPlugin優化打包效能（基於vue-cli）

webpack-DllPlugin優化打包效能（基於vue-cli）

阿新 • • 發佈：2018-12-13

1.介紹

Dll這個概念應該是借鑑了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它本身不能執行，是用來給你的app引用的。

打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest檔案中，而引用dll的程式碼（dll user）在打包的時候，只需要讀取這個manifest檔案，就可以了。

簡單說

將靜態資原始檔（執行依賴包）與原始檔分開打包，先使用DllPlugin給靜態資源打包，再使用DllReferencePlugin讓原始檔引用資原始檔。

2.預打包依賴模組

在根目錄建立一個webpack.dll.config.js

的配置檔案

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

module.exports = {
  // 你想要打包的模組的陣列
  entry: {
    vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },
  output: {
    path: path.join(__dirname, './static/js'), // 打包後文件輸出的位置
    filename: '[name].dll.js',
    library:
 
 '[name]_library' 
    // vendor.dll.js中暴露出的全域性變數名。
    // 主要是給DllPlugin中的name使用，
    // 故這裡需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library', 
      context: __dirname
    }
 
),
    // 壓縮打包的檔案，與該文章主線無關
    new webpack.optimize.UglifyJsPlugin({ 
      compress: {
        warnings: false
      }
    })
  ]
};

重點：這裡引入的Dllplugin外掛，該外掛將生成一個manifest.json檔案，該檔案供webpack.config.js中加入的DllReferencePlugin使用，使我們所編寫的原始檔能正確地訪問到我們所需要的靜態資源（執行時依賴包）。

  • path：manifest.json生成的資料夾及名字，該專案讓它生成在了根目錄下。
  • name：和output. library保持一致即可。
  • context：選填，manifest檔案中請求的上下文，預設為該webpack檔案上下文。（！！！我在學習這個外掛時一直沒有成功的坑點之一！！，這個上下文必須必須同webpack.config.js中DllReferencePlugin外掛的context所指向的上下文保持一致！！）

編寫完之後就可以預打包資原始檔了

## 以指定webpack檔案執行webpack打包
webpack --config ./webpack.dll.config.js

還可以把這句加到package.json裡面

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress",
    "dll": "webpack --config ./webpack.dll.config.js"
  },

打包完成後，會在static檔案下面有個js檔案，其內有個vendor.dll.js,除此之外根目錄下還生成了vendor-manifest.json.現在我們已經不再需要將使用的那些包同源檔案一起打包了，但是這也需要在原始檔的webpack中配置DllReferencePlugin使用vendor-manifest.json來引用這個dll。

3.打包原始檔

這一步我們只需要改寫vue-cli為我們生成好的webpack.config.js即可：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    // ...（省略未複製，並不是刪除了module裡的東西）
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

該檔案裡主要是添加了plugins配置：

plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    })
  ]

context：與Dllplugin裡的context所指向的上下文保持一致，這裡都是指向了根目錄。
manifest：引入Dllplugin所生成的的manifest

最後

我們需要手動在根目錄的index.html裡引入所生成的dll庫。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>dll-test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
    <script src="/dist/build.js"></script>
  </body>
</html>

這裡也很講究，也是我之前失敗的原因之一！！我之前直接把的後面，導致一直報錯！其實這裡稍微動動腦筋就能明白，我們在main.js中引入的各種包，而main.js最終被打包為了build.js，那麼我們肯定要先把包引進來才能正確使用build.js啊！所以vendor.dll.js必須放在build.js之前引入。

其實還有一個問題

在webpack.config.js中：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

這就代表main.js中的import Vue from ‘vue’ 其實是引用的’vue/dist/vue.esm.js’，而webpack.dll.config.js並不知道vue指代的是’vue/dist/vue.esm.js’，所以我們需要修改webpack.dll.config.js配置：
將

  vendor: ['vue', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },

  entry: {
    vendor: ['vue/dist/vue.esm.js', 'lodash', 'vuex', 'axios', 'vue-router', 'element-ui']
  },

由於我們修改了webpack.dll.config.js，所以我們需要重新打包：

## 重新打包dll
npm run dll
## 重新打包原始檔
npm run build

到這裡優化就結束了，但是有個小麻煩，我們每次上線的時候需要新建資料夾，然後把index.html複製貼上進去，再把dist目錄貼上進去，還要把static貼上進去再上線，我們不希望那麼麻煩。

4.提取整個資料夾

首先安裝幾個外掛：

npm install html-webpack-plugin copy-webpack-plugin clean-webpack-plugin --save-dev

然後我們修改webpack.config.js配置：

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.[hash].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    contentBase: path.join(__dirname, 'dist')
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./vendor-manifest.json')
    }),
    new HtmlWebpackPlugin({
      inject: true,
      template: './index.html',
      filename: 'index.html'
    }),
    new CopyWebpackPlugin([
      { from: 'static', to: 'static' }
    ]),
    new CleanWebpackPlugin(['dist'])
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
差別一：
 output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/',
    filename: 'build.[hash].js'
  },
  • 加了hash值，清除瀏覽器快取
  • publicPath: ‘/’: 由於index.html需要打包到dist目錄下，故’build.[hash].js’的引用路徑由/dist/變為/
差別二：

主要是在plugins新添加了三個外掛(千萬不能加在if裡，否則開發環境會出錯)：

new HtmlWebpackPlugin({
  inject: true,
  template: './index.html'
}),
new CopyWebpackPlugin([
  {from: 'static', to:'static'}
]),
new CleanWebpackPlugin(['dist'])
  • html-webpack-plugin：我們要index.html生成在dist目錄裡，故引用html-webpack-plugin，它預設將生成的index.html打包在output的資料夾下，由於index.html需要引用打包好的靜態dll，且vue需要掛載在根元件div#app上，故需要引入模版，模版為根目錄下index.html：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>dll-test</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./static/js/vendor.dll.js"></script>
  </body>
</html>

  • inject:true：將打包好的js檔案注入在該html的body底部，保證了script的載入順序。

  • copy-webpack-plugin：由於我們要引入static/js/中的dll，且是在dist檔案下，故用該外掛將打包好的靜態資料夾拷貝到打包目錄dist下。

  • clean-webpack-plugin：打包前清除dist目錄

差別三：
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    contentBase: path.join(__dirname, 'dist')
  },

contentBase: path.join(__dirname, ‘dist’)，這是為了在dev環境下，提供index.html的目錄改為dist，與生產環境的訪問檔案路徑保持一致。

最後

npm run dev就可以愉快的開發啦，npm run build就可以以極速打包好dist目錄且上線啦。！！！

相關推薦

webpack-DllPlugin優化打包效能（基於vue-cli）

1.介紹 Dll這個概念應該是借鑑了Windows系統的dll。一個dll包，就是一個純純的依賴庫，它本身不能執行，是用來給你的app引用的。 打包dll的時候，Webpack會將所有包含的庫做一個索引，寫在一個manifest檔案中，而引用dll的程式碼（dll user）在打

vue+webpack搭建基礎項目（非vue-cli）

yarn urn set pan conf render aoe 分享 pre yarn add vue yarn add webpack yarn add webpack-cli yarn add html-webpack-plugin yarn add webpack

使用Webpack構建SPA模式的多頁面應用（基於Vue 2）

背景 Webpack構建後生成的包實在太大了，特別是大型專案，編譯後得到一個龐然大物真是個惡夢。 那麼問題來了，有解決辦法嗎？當然，我們可以指定一組檔案（元件）生成到一個或者多個目錄中去。 上程式碼。 指定元件目錄 編輯webpack.base.conf.js檔案，配置e

關於webpack下熱更新？&自動刷新？的小記（非vue-cli）

入口 實踐 創建 line color 並不會 inline -m 16px 寫本隨筆時：webpack4.6.0 為何標題用？號，因為老衲也不知是否用詞正確，大概是這樣的說法： webpack4.0引入生產模式和開發模式，在開發時使用 webpack 打包後不壓縮，所以只

Vue自動化路由（基於Vue-Router）開篇

# vue自動化路由 好久不見~ 若羽又開篇Vue的內容了。 年初的時候釋出了第一版的`ea-router`自動化路由庫，歡迎大家安裝使用。[［Github地址］](https://github.com/WhileKing/ea-router) [［npm地址］](https://www.npmjs.com

Vue+vue-router+Webpack4模擬登陸跳轉和巢狀路由功能（非vue-cli）

Webpack實現的功能 打包和輸出html 打包，分離，壓縮和輸出css檔案 vue模板解析 自定義輸出js檔案路徑和名稱等 demo的基本功能 使用vue-router模擬登陸和跳轉 vue-router巢狀路由模擬登陸後切換頁面 packag

基於vue-cli項目打包慢的定位優化過程

bubuko clas js等 後來 color element 但是 別名 com 　　入職一周後，上一個前端就離職了（超級坑爹的），留下了一個比較棘手的問題，就是基於vue-cli的項目打包超級慢，我接手項目的時候，打包需要45min（上個離職者也不知道原因），經過3個

一步步教你搭建一個完整的前端專案（基於vue、element-ui、webpack）

準備工作 需要先安裝node環境，官方地址：https://nodejs.org 開始搭建 Windows下不要使用git自帶的mintty執行命令，切換選項時會失效的。覺得cmd難看的話用PowerShell會好一些，只是好一些，呵呵。 安裝vue npm instal

vue-cli起的webpack專案 用localhost可以訪問，但是切換到ip就不可以訪問 我用的是vux起的一個專案（移動端，基於vue的），因為是移動端的，需要在手機上測試，發現用

      我用的是vux起的一個專案（移動端，基於vue的），因為是移動端的，需要在手機上測試，發現用http://localhost:8081/訪問的挺好的，但是換到ip就訪問不了，期初我以為是代理的原因，將電腦的代理給關掉了。還是不行，然後改為127.0.0.1訪問，發現可以訪問，用0.0.0.0訪

React + Webpack多入口打包配置（一）基礎配置快速打包，優化打包速度

1. 安裝編譯外掛 編譯 jsx、es6、scss 等資源 ● 使用 bael 和 babel-loader 編譯 jsx、es6 ● 安裝外掛: babel-preset-es2015 用於解析 es6 ● 安裝外掛：babel-preset-react 用於

vue+webpack多環境打包配置（不同環境不同命令）

 以前在打包專案，會寫三個環境地址，打包前都需要手動切換地址，實現多環境打包配置後可以省掉這一步。   本文來談一談多環境打包的配置方法（本人是一枚前端小透明，用的方法不是最優，若有更優的，歡迎指教）  1、在根目錄下 的config資料夾下新建test.env.js

Web App 分層架構（基於 Vue+Router+Vuex）

組件 產生 行數據 之間 不能 程序 簡單的 用戶 工作 一、分層架構 　　1.Web App分為三層：行為層， 數據存儲層和協議層，各層的的分工是非常明確的。 　　　　a.行為層， 體現在.vue組件和路由上，存放一些簡單的數據主要用於與用戶之間的及時

基於vue-cli（vue腳手架）搭建專案

1.安裝node.js，安裝包及原始碼下載地址 https://nodejs.org/en/download/ 通過【node -v】來檢查node.js是否安裝成功，若出現版本號即成功 2.node.js自帶npm，npm其實是Node.js的包管理工具（package

vue如何實現程式碼打包分離（按需載入）

在vue中使用import()來代替require.ensure()實現程式碼打包分離 一、require.ensure() 方法來實現程式碼打包分離 require.ensure() 是 webpack 特有的，已經被 import() 取代。 require.en

基於Vue-Cli 打包自動生成/抽離相關配置檔案

背景 基於Vue-cli 專案產品部署，涉及到的互動的地址等配置資訊，每次都要重新打包才能生效，極大的降低了效率。我們的目的是讓專案實施的小夥伴重新快樂起來。網上實現的方式，都是半自動化的，還需要重新修改。 需求點 配置化：打包後的配置檔案可二次修改 配置自動生成：vue-cli 提

WebSocket的使用（基於VUE與SpringBoot）

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。WebSocket 使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資

在基於vue-cli的專案自定義打包環境

在工作當中，遇到了下面這個問題： 測試環境與生產環境中的使用者許可權不一樣，因此，就需要根據測試環境打一個包，生產環境又打一個包。可是，如果每次打包都需要更改許可權的配置檔案的話，會很麻煩，而且，體現不出一個coder該有的逼格。為了更有逼格地解決這個問題，於是我百度了一番，上天不負有心

音樂、視訊播放模式切換實現方案及原理解析（基於vue、vuex、h5 audio）

音樂、視訊播放模式切換實現方案及原理解析（基於vue、vuex、h5 audio） 播放模式有三種： 順序播放 隨機播放 單曲迴圈 定義為一個playMode物件並向外暴露，內含三種播放模式，即為： export const playMode = { sequen

資料列表實現方式（基於Vue.js封裝）

抽時間看了下Vue.js，果然好清爽。 寫了個小demo，實現Table方式的列表。 如下： 先貼效果，即每個開發人員實現功能時需要寫的程式碼： <html> <head> <script src="vue.js"></s

前端框架Vue（12）——如何將 vue-cli 專案打包壓縮（npm run build）後放到伺服器

  當我們將 vue 專案完成後，面臨的就是如何將專案進行打包上線，放到伺服器中。我使用的是 vue-cli（simple） 腳手架，所以就講一下如何將專案進行打包，並放到 tomcat 上。   如果是 vue-cli (非 simple 腳手架)，這篇