從零開(kāi)始的webpack生活-0x008：DLL加速編譯

ityouknow 發(fā)布于2019-08-21 17:29 / 724人閱讀

摘要：概述上一章講的是，和這一章依舊沒(méi)有絲毫關(guān)系，這一章講的是和。插件介紹這個(gè)插件啊，用來(lái)預(yù)打包一些第三方庫(kù)，因?yàn)樗麄儾唤?jīng)常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費(fèi)了調(diào)試編譯的時(shí)間，還浪費(fèi)了時(shí)間。

0x001 概述

上一章講的是CommonChunkPlugin，和這一章依舊沒(méi)有絲毫關(guān)系，這一章講的是DllPlugin和DllReferencePlugin。

0x002 插件介紹

這個(gè)插件啊，用來(lái)預(yù)打包一些第三方庫(kù)，因?yàn)樗麄儾唤?jīng)常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費(fèi)了調(diào)試編譯的時(shí)間，還浪費(fèi)了....時(shí)間。

0x003 栗子又來(lái)了

初始化項(xiàng)目

$ midkir 0x007-dll
$ cd 0x007-dll
$ cnpm init -y
$ cnpm install angular lodash jquery

這次需要兩個(gè)配置文件，一個(gè)用于打包dll，一個(gè)用于打包dll-user，先配置用來(lái)打包dll的webpack.dll.config.js

$ vim ./webpack.dll.config.js
// ./webpack.dll.config.js
const path = require("path");
const webpack = require("webpack");

module.exports = {
    entry: {
        vendor: ["angular", "jquery","lodash"]// 用這三個(gè)庫(kù)打包成dll做測(cè)試
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].dll.js",
        library: "[name]_library"
    },
    plugins: [
        new webpack.DllPlugin({
            path: path.join(__dirname, "dist", "[name]-manifest.json"),
            name: "[name]_library" // 需要與output.library相同
        })
    ]
};

打包dll，將會(huì)在./dist目錄下生成vendor-minifest.json、vendor.dll.js

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

配置dll-user

$ vim ./webpack.config.js
# ./webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
    entry: {
        "dll-user": ["./src/index.js"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].bundle.js"
    },

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

};

添加入口文件

$ vim ./src/index.js
// ./src/index.js
var angular = require("angular");
console.log(angular);

打包dll-user

$ webpack 
Hash: 1aa3feec9d1827de7d5a
Version: webpack 3.8.1
Time: 70ms
             Asset     Size  Chunks             Chunk Names
dll-user.bundle.js  2.88 kB       0  [emitted]  dll-user
   [0] multi ./src/index.js 28 bytes {0} [built]
   [2] ./src/index.js 56 bytes {0} [built]
   // 注意這行 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
   [3] delegated ./node_modules/_angular@1.6.6@angular/index.js from dll-reference vendor_library 42 bytes {0} [built]
    + 1 hidden module

注意：這里我們引用了angular但是在打包完的index.js中，并不存在angular，因?yàn)槲覀兺ㄟ^(guò)引用dll來(lái)引入angular，在打包的信息輸出中，對(duì)于angular的處理也變成了delegated,

更多詳細(xì)信息，請(qǐng)查看webpack關(guān)于DllPlugin章節(jié)

0x004 資源

源代碼