使用DllPlugin和DllReferencePlugin提升打包速度

在項目開發過程當中，遇到須要優化打包速度的問題。咱們能夠經過分離第三庫的形式優化構建速度。

在項目中咱們常常會用到jquery，vue，echarts等第三方庫。咱們能夠把這些第三庫和本身的開發代碼分離開來，只須要在第一次構建的時候進行打包，之後就不會再去編譯這些第三方庫，從而優化了打包的速度。

基礎

DLLPlugin 和 DLLReferencePlugin 用某種方法實現了拆分 bundles，同時還大大提高了構建的速度。

DllPlugin

這個插件是在一個額外的獨立的 webpack（通常設置爲webpack.dll.config.js） 設置中建立一個只有 dll 的 bundle(dll-only-bundle)。 這個插件會生成一個名爲 manifest.json 的文件，這個文件是用來讓 DLLReferencePlugin 映射到相關的依賴上去的。

在給定的 path 路徑下建立一個名爲 manifest.json 的文件。 這個文件包含了從 require 和 import 的request到模塊 id 的映射。 DLLReferencePlugin 也會用到這個文件。

DllReferencePlugin

這個插件是在 webpack 主配置文件中設置的， 這個插件把只有 dll 的 bundle(們)(dll-only-bundle(s)) 引用到須要的預編譯的依賴。

經過引用 dll 的 manifest 文件來把依賴的名稱映射到模塊的 id 上，以後再在須要的時候經過內置的 __webpack_require__ 函數來 require 他們

與 output.library 保持 name 的一致性。

模式(Modes)

這個插件支持兩種模式，分別是做用域(scoped)和映射(mapped)。

做用域模式(Scoped Mode)

dll 中的內容能夠在模塊前綴下才能被引用，舉例來講，令scope = "xyz"的話，這個 dll 中的名爲 abc 的文件能夠經過 require("xyz/abc") 來獲取

映射模式(Mapped Mode)

dll 中的內容被映射到了當前目錄下。若是一個被 require 的文件符合 dll 中的某個文件(解析以後)，那麼這個dll中的這個文件就會被使用。

因爲這是在解析了 dll 中每一個文件以後才發生的，相同的路徑必須可以確保這個 dll bundle 的使用者(不必定是人，可指某些代碼)有權限訪問。 舉例來講， 假如一個 dll bundle 中含有 loadash庫 以及 文件abc， 那麼 require("lodash") 和 require("./abc") 都不會被編譯進主要的 bundle文件，而是會被 dll 所使用。

用法(Usage)

1. 搭建初始項目

目錄結構：

webpack.config.js        
webpack.dll.config.js        
src            
    index.html            
    pages                
    index.js    
static
    jquery.js    
package.json複製代碼

2.引入安裝包 jquery，webpack，webpack-cli

npm install webpack webpack-cli html-webpack-plugin --save-dev    複製代碼

npm install jquery --save    複製代碼

3.搭建簡單模板 運行項目

var HtmlWebpackPlugin = require('html-webpack-plugin');var path = require('path');var webpackConfig = {        mode:'development',        entry: path.resolve(__dirname,'./src/pages/index.js'),        output: {                path: path.resolve(__dirname, './dist'),                filename: 'index_bundle.js'        },        plugins: [new HtmlWebpackPlugin({                template:path.resolve(__dirname,'./src/index.html')        })]};module.exports = webpackConfig;複製代碼

4.在webpack.dll.config.js編寫mainfest代碼

const path = require('path')const webpack = require('webpack')module.exports = {    mode: 'development',    entry: {        // 定義程序中打包公共文件的入口文件vendor.js        vendor: ['jquery'],    },    output: {        path: path.resolve('./src/dll'),        filename: '[name].dll.js',        library: '[name]_[hash]',        libraryTarget: 'this'    },    plugins: [        new webpack.DllPlugin({            // 定義程序中打包公共文件的入口文件vendor.js            context: __dirname,            // manifest.json文件的輸出位置            path: path.join('./src', 'dll', '[name]-manifest.json'),            // 定義打包的公共vendor文件對外暴露的函數名            name: '[name]_[hash]'        })    ]}
// 第一次運行webpack --config webpack.dll.config.js複製代碼

5.webpack.config.js修改後臺的代碼

...    
plugins: [        new HtmlWebpackPlugin({            template: path.resolve(__dirname, './src/index.html')        }),        // dllPlugin關聯配置 // 新增代碼 new webpack.DllReferencePlugin({ context: __dirname, // 跟dll.config裏面DllPlugin的context一致 manifest: require('./src/dll/vendor-manifest.json') }), ]
...
// 第二次運行webpack複製代碼

結論

運用DllPlugin插件，把第三方庫分離出來，可以大幅提升打包的速度