深刻淺出的webpack構建工具---DllPlugin DllReferencePlugin提升構建速度(七)

時間  2019-11-11
標籤 深刻 webpack 構建 工具 dllplugin dllreferenceplugin 提升 速度 简体版
原文   原文鏈接

閱讀目錄javascript

一：什麼是DllPlugin 和 DllReferencePlugin？做用是什麼？css

二：在項目中如何使用 DllPlugin 和 DllReferencePlugin？html

三：DllPlugin DllReferencePlugin使用在vue和vuex項目中vue

一：什麼是DllPlugin 和 DllReferencePlugin？做用是什麼？java

  在使用webpack進行打包時候，對於依賴的第三方庫，好比vue，vuex等這些不會修改的依賴，咱們可讓它和咱們本身編寫的代碼分開打包，這樣作的好處是每次更改我本地代碼的文件的時候，webpack只須要打包我項目自己的文件代碼，而不會再去編譯第三方庫，那麼第三方庫在第一次打包的時候只打包一次，之後只要咱們不升級第三方包的時候，那麼webpack就不會對這些庫去打包，這樣的能夠快速的提升打包的速度。所以爲了解決這個問題，DllPlugin 和 DllReferencePlugin插件就產生了。node

那麼對於目前webpack社區來說，咱們但願和本身編寫的代碼分離開的話，webpack社區提供了2種方案：
1. CommonsChunkPlugin
2. DLLPluginjquery

CommonsChunkPlugin 插件每次打包的時候仍是會去處理一些第三方依賴庫，只是它能把第三方庫文件和咱們的代碼分開掉，生成一個獨立的js文件。可是它仍是不能提升打包的速度。webpack

DLLPlugin 它能把第三方庫代碼分離開，而且每次文件更改的時候，它只會打包該項目自身的代碼。因此打包速度會更快。git

DLLPlugin 這個插件是在一個額外獨立的webpack設置中建立一個只有dll的bundle，也就是說咱們在項目根目錄下除了有webpack.config.js，還會新建一個webpack.dll.config.js文件。webpack.dll.config.js做用是把全部的第三方庫依賴打包到一個bundle的dll文件裏面，還會生成一個名爲 manifest.json文件。
該manifest.json的做用是用來讓 DllReferencePlugin 映射到相關的依賴上去的。github

DllReferencePlugin 這個插件是在webpack.config.js中使用的，該插件的做用是把剛剛在webpack.dll.config.js中打包生成的dll文件引用到須要的預編譯的依賴上來。什麼意思呢？就是說在webpack.dll.config.js中打包後好比會生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含全部的第三方庫文件，vendor-manifest.json文件會包含全部庫代碼的一個索引，當在使用webpack.config.js文件打包DllReferencePlugin插件的時候，會使用該DllReferencePlugin插件讀取vendor-manifest.json文件，看看是否有該第三方庫。vendor-manifest.json文件就是有一個第三方庫的一個映射而已。

因此說 第一次使用 webpack.dll.config.js 文件會對第三方庫打包，打包完成後就不會再打包它了，而後每次運行 webpack.config.js文件的時候，都會打包項目中自己的文件代碼，當須要使用第三方依賴的時候，會使用 DllReferencePlugin插件去讀取第三方依賴庫。因此說它的打包速度會獲得一個很大的提高。

二：在項目中如何使用 DllPlugin 和 DllReferencePlugin？

 在使用以前，咱們首先看下咱們項目如今的整個目錄架構以下：

### 目錄結構以下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- js                                 # 存放全部js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- webpack.dll.config.js              # 打包第三方依賴的庫文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放全部的css樣式文件   
|   | |-- main.styl                         # main.styl文件   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼文件

所以咱們首先須要在咱們的項目根目錄下建立一個 webpack.dll.config.js 文件。而後配置代碼以下：

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // 入口文件
  entry: {
    // 項目中用到該兩個依賴庫文件
    jquery: ['jquery'],
    echarts: ['echarts']
  },
  // 輸出文件
  output: {
    // 文件名稱
    filename: '[name].dll.js', 
    // 將輸出的文件放到dist目錄下
    path: path.resolve(__dirname, 'dist'),

    /*
     存放相關的dll文件的全局變量名稱，好比對於jquery來講的話就是 _dll_jquery, 在前面加 _dll
     是爲了防止全局變量衝突。
    */
    library: '_dll_[name]'
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       該插件的name屬性值須要和 output.library保存一致，該字段值，也就是輸出的 manifest.json文件中name字段的值。
       好比在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件輸出的位置和文件名稱 */
      path: path.join(__dirname, 'dist', '[name].manifest.json')
    })
  ]
};

DllPlugin 插件有三個配置項參數以下：
context(可選)： manifest文件中請求的上下文，默認爲該webpack文件上下文。
name: 公開的dll函數的名稱，和 output.library保持一致。
path: manifest.json 生成文件的位置和文件名稱。

下面咱們繼續看下 webpack.config.js 配置代碼以下：

首先引入文件以下代碼：

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

而後在插件中使用該插件，以下代碼：

module.exports = {
  plugins: [
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到json文件上去
      manifest: require('./dist/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      // echarts 映射到json文件上去
      manifest: require('./dist/echarts.manifest.json')
    })
  ]
}

DllReferencePlugin項的參數有以下：

context: manifest文件中請求的上下文。
manifest: 編譯時的一個用於加載的JSON的manifest的絕對路徑。
context: 請求到模塊id的映射(默認值爲 manifest.content)
name: dll暴露的地方的名稱(默認值爲manifest.name)
scope: dll中內容的前綴。
sourceType: dll是如何暴露的libraryTarget。

webpack.config.js 全部代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的文件
// const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js'
  },
  output: {
    filename: '[name].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, 'node_modules'), // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    // new ClearWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    }),
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到json文件上去
      manifest: require('./dist/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      // echarts 映射到json文件上去
      manifest: require('./dist/echarts.manifest.json')
    })
  ]
};

執行構建：

最後一步就是構建代碼了，先生存第三方庫文件，所以咱們運行以下命令：

webpack --config webpack.dll.config.js

爲了方便，咱們在package.json中scripts加以下代碼了：

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

因此咱們先運行 npm run build:dll 命令，運行完成後，會在dist目錄下生存 echarts.dll.js, echarts.manifest.json,jquery.dll.js, jquery.manifest.json 文件。以下圖所示：

再看下打包兩個庫執行的時間，以下所示：

xx.dll.js 文件代碼大概以下這個樣子，好比echarts.dll.js 代碼爲例：

var _dll_echarts = (function(modules) {
  // ... 此處省略 webpackBootstrap 函數代碼
}([
  (function(module, exports, __webpack_require__) {
    // ID爲0模塊對應的代碼
  }),
  (function(module, exports, __webpack_require__) {
    // ID爲1模塊對應的代碼
  }),
  // ....... 不少模塊代碼
]));

那麼 echarts.manifest.json 生存的代碼以下：

{
  "name": "_dll_echarts",
  "content": {
    "./node_modules/zrender/lib/core/util.js": {
      "id": 0,
      "meta": {}
    },
    "./node_modules/echarts/lib/echarts.js": {
      "id": 1,
      "meta": {}
    },
    "./node_modules/echarts/lib/util/graphic.js": {
      "id": 2,
      "meta": {}
    },
    // .....
  }
}

echarts.manifest.json 文件能夠清楚的看到與其對應的dll.js文件中包含了哪些模塊，以及每一個模塊的路徑和ID。

如上打包完庫文件後，咱們須要 運行 npm run build命令打包項目中文件了，以下dist目錄後的文件

而後咱們查看index.html代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body>
  <div id="app">22222</div>
  <div class="test1">12aaa</div>
  <div class='test2'>vvvvv</div>
<script type="text/javascript" src="main.js"></script></body>
</html>

能夠看到jquery文件沒有自動加上，所以須要咱們手動加上，加上後代碼變成以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body>
  <div id="app">22222</div>
  <div class="test1">12aaa</div>
  <div class='test2'>vvvvv</div>
<script type="text/javascript" src="jquery.dll.js"></script>
<script type="text/javascript" src="main.js"></script></body>
</html>

加上jquery.dll.js文件後，main.js入口文件的代碼以下：

require('../styles/main.styl');

const $ = require('jquery');
$('#app').html('歡迎你來個人博客');

console.log('這是main.js');
require('./demo1.js');

$('#app') 就能夠操做元素了。

github上查看demo

三：DllPlugin DllReferencePlugin使用在vue和vuex項目中

 首先vuex-demo代碼能夠查看github上的代碼了。而後咱們在沒有使用 DllPlugin 插件時候，打包的速度以下，使用了十幾秒：

github查看demo

首先咱們看下咱們的入口文件 src/business/examine/app.js，引入咱們所安裝的靜態資源，結果爲：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './base/main';
import routerConfig from './router';
import store from './store';

// 主題樣式
import '../../components/common/common.styl';

Vue.config.devtools = true;

// Router
Vue.use(VueRouter);

// Resource
Vue.use(VueResource);

// 配置 resource
Vue.http.options.root = '';
Vue.http.options.emulateJSON = true;

const router = routerConfig(VueRouter);

new Vue(Vue.util.extend({
  router,
  store
}, App)).$mount('#app');

在store文件內用到了vuex，以下代碼：

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import mutations from './mutations';
import actions from './actions';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
});

如上代碼咱們把vue和vue-router,vue-resource，vuex一塊兒打包的。如上只是用到一些vue常見的插件，尚未使用不少其餘的插件，就耗時了十幾秒的時間，若是插件更多的話，那麼相對來講耗時更長，那麼如今咱們但願把 vue，vuex, vue-router, vue-resource這樣的在 webpack.dll.config.js中進行打包，而後再使用webpack.config.js打包本項目中的文件代碼；
仍是和上面同樣在項目中根目錄下新建 webpack.dll.config.js，我把打包文件統一都放到build文件內，配置代碼以下：

配置入口文件代碼：

module.exports = {
  entry: {
    // 項目中用到該依賴庫文件
    vendor: ['vue/dist/vue.esm.js', 'vue', 'vuex', 'vue-router', 'vue-resource']
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       該插件的name屬性值須要和 output.library保存一致，該字段值，也就是輸出的 manifest.json文件中name字段的值。
       好比在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件輸出的位置和文件名稱 */
      path: path.resolve(__dirname, paths.dist, '[name].manifest.json')
    })
  ]
}

webpack.config.js 配置相關代碼以下：

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  plugins: [
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到json文件上去
      manifest: require(path.resolve(__dirname, paths.dist, 'vendor.manifest.json'))
    }),
  ]
}

而後運行打包 npm run build 後，打包的時間以下圖所示：

能夠看到沒有使用 DllPlugin DllReferencePlugin 打包前，打包的時間須要12.5秒，使用了該插件後，僅僅須要4秒的時間，可見提升了8秒的打包時間。而且分了兩個文件，全部相關的vue的依賴都放在了vendor.dll.js內，咱們項目上相關的代碼放在了bundle.js內，這樣就能夠減小一個js文件很是大的問題。可是在頁面上須要引用 vendor.dll.js 文件了。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程