webpack性能優化——DLL

時間 2019-11-09

原文原文鏈接

Webpack性能優化的方式有不少種，本文之因此將 dll 單獨講解，是由於 dll 是一種最簡單粗暴而且極其有效的優化方式。html

在一般的打包過程當中，你所引用的諸如：jquery、bootstrap、react、react-router、redux、antd、vue、vue-router、vuex 等等衆多庫也會被打包進 bundle 文件中。因爲這些庫的內容基本不會發生改變，每次打包加入它們無疑是一種巨大的性能浪費。vue

Dll 的技術就是在第一次時將全部引入的庫打包成一個 dll.js 的文件，將本身編寫的內容打包爲 bundle.js 文件，這樣以後的打包只用處理 bundle 部分。node

以一個 Vue 項目爲例，首先建立一個名爲 webpack.dll.config.js 的文件react

var path = require("path"),
　　fs = require('fs'),
　　webpack = require("webpack");

var vendors = [
　　'vue', 
　　'vue-router', 
　　'vuex'
];

module.exports = {
　　entry: {
　　　　vendor: vendors
　　},
　　output: {
　　　　path: path.join(__dirname, "dist"),
　　　　filename: "Dll.js",
　　　　library: "[name]_[hash]"
　　},
　　plugins: [
　　　　new webpack.DllPlugin({
　　　　　　path: path.join(__dirname, "dist", "manifest.json"),
　　　　　　name: "[name]_[hash]",
　　　　　　context: __dirname
　　　　})
　　]
};

這個文件的做用是將 vue、vue-router 以及 vuex 合併打包爲一個名爲 Dll.js 的靜態資源包，同時生成一個 manifest.json 文件方便對 Dll.js 中的模塊進行引用。jquery

要注意的是，執行 webpack 命令是默認執行該目錄下名爲 webpack.config.js 或者 webpackfile.js 的文件。因此須要經過 --config 指令手動指定該文件，最後加入 -p 指令將 Dll.js 壓縮。webpack

$ webpack --config webpack.dll.config.js -p

這樣，在項目根目錄下就會多增長一個 dist 文件夾，其中有壓縮以後的 Dll.js 與 manifest.json 文件。git

manifest.json 文件內容以下，給各個模塊賦予 id 以便引用。github

{
  "name": "vendor_2beb750db72b1cda4321",
  "content": {
    "./node_modules/process/browser.js": {
      "id": 0,
      "meta": {}
    },
    "./node_modules/vue-router/dist/vue-router.esm.js": {
      "id": 1,
      "meta": {
        "harmonyModule": true
      },
      "exports": [
        "default"
      ]
    },
    "./node_modules/vue/dist/vue.runtime.esm.js": {
      "id": 2,
      "meta": {
        "harmonyModule": true
      },
      "exports": [
        "default"
      ]
    },
//.......

最後在 webpack.config.js 中添加引用。在 plugins 屬性中添加 DllReferencePlugin 插件，並指明 manifest.json 文件的引用路徑。web

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

在確保成功執行 webpack.dll.config.js 文件後，執行 webpack -p 進行項目打包。vue-router

能夠看到打包在 Dll 文件中的文件都被 delegated(委派) ，而不是直接打進 bundle 文件中。

這樣咱們就將全部的資源完成打包，生成的 dist 目錄以下：

不過 dist 文件夾要想做爲一個完整的工程還少一個 html 文件，我建立了一個名爲 pack.js 的文件，使用 nodejs 的 fileSystem 對 html 文件進行修改並拷貝。

pack.js

var fs = require('fs');

fs.readFile('./index.html', 'utf8', (err, data) => {
    if (!err) {
        var dataStr = data.toString(),
        timestamp = (new Date()).getTime();
    
        dataStr = dataStr
                    .replace('bundle.js', 'bundle.js?v='+timestamp)
                    .replace('<!-- dll -->', '<script src="./dist/Dll.js?v='+ timestamp +'"></script>');

        fs.writeFile('./dist/index.html', dataStr, (error) => {
            if (!error) {
                console.log('HTML file copy successfully');
            } else {
                console.log(error);
            }
        });
    } else {
        console.log(err);
    }
});

咱們須要在模塊的入口 html 中添加  的佔位字符，pack.js 的做用就是將 html 文件拷貝一份到 dist 目錄下，同時將  替換爲引用 Dll.js 的 script 標籤，並在引用文件後添加時間戳。

<!-- .... -->
<body>
<div id="demo" class="container"></div>

<!-- dll -->
<script src="./bundle.js"></script>
</body>
</html>

在執行 webpack -p 打包後，輸入下面命令運行 pack.js，就會在 dist 目錄下生成 html 文件。

$ node pack.js

內容以下：

<!-- .... -->
<body>
<div id="demo" class="container"></div>

<script src="./dist/Dll.js?v=1488250309725"></script>
<script src="./bundle.js?v=1488250309725"></script>
</body>
</html>