轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：dll

• dll動態鏈接庫
  • 目的：單獨的將多個指定的第三方庫打包成一個chunk。
  • 意義：將不同的庫分割開來，實現代碼分割和避免重復打包，在節省打包時間的同時方便按需加載和預加載的實現。

一、打包指定的第三方庫

1.1、創建dll打包配置文件

根目錄下創建webpack.dll.js配置文件

/* 
    路徑：./webpack.dll.js (名字可任意取)
    使用dll技術，對某些第三方庫（如：jquery、react、vue…）進行單獨打包
    當你運行 webpack 時，默認查找 webpack.config.js 配置文件
    需求： 需要運行 webpack.dll.js 打包
        > webpack --config webpack.dll.js
*/

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        // 最終打包生成的[name]-->jquery
        // ['jquery']--> 要打包的庫是jquery
        jquery: ['jquery']
    },
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dll'),
        library: '[name]_[hash]' //打包的庫里面向外泰露出去的內容叫什么名字。
    },
    plugins: [
        // 打包生成一個manifest.json文件，提供和jquery映射關系。
        new webpack.DllPlugin({
            name: '[name]_[hash]', // 映射庫暴露的內容名稱
            path: resolve(__dirname, 'dll/manifest.json'),  // 映射文件輸出路徑
        })
    ],
    mode: 'production'

}

1.2、打包dll

# 根據webpack.dll.js配置的內容打包
> webpack --config webpack.dll.js

1.3、工程文件目錄

.
├── dll    // 打包后生成的目錄
│   ├── jquery.js    // 根據webpack.dll.js配置獨立打包出來的jquery
│   └── manifest.json   //映射文件
├── src
│   ├── index.html
│   └── index.js
├── webpack.config.js
└── webpack.dll.js    //打包配置文件

二、應用單獨打包的dll

2.1、修改webpack.config.js

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
// 引入打包 html 文件的插件 html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入webpack
const webpack = require('webpack');
// 引入add-asset-html-webpack-plugin
const AddAssetHtmlWebpackPlugin =require('add-asset-html-webpack-plugin');

module.exports = {
    // webpack配置
    // 入口起點文件
    entry: './src/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'built.js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [
            // 詳細loader配置
            //不同文件必須配置不同loader處理
            // 打包 css 文件的詳細loader配置
            {
                // 匹配哪些文件
                test: /\.css$/,
                // 使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    // 創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    // 將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',

                ],
            },
            //打包less 文件的詳細loader配置
            {
                //匹配哪些文件
                test: /\.less$/,
                //使用哪些loader進行處理
                use: [
                    // use數組中loader執行順序:從右到左,從下到上依次執行
                    //創建style標簽,將js中的樣式資源插入進行,添加到head中生效
                    'style-loader',
                    //將css文件變成commonjs模塊加載js中,里面內容是樣式字符串
                    'css-loader',
                    //將less文件編譯成css文件
                    //需要下載less-loader和less
                    'less-loader'
                ]
            },
        ]
    },
    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        // 詳細的plugins配置
        // html-webpack-plugin
        // new HtmlWebpackPlugin() 功能:默認會創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
        //需求:需要有結構的HTML文件
        new HtmlWebpackPlugin({
            //復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
            template: './src/index.html'
        }),
        // 告訴webpack哪些庫不參與打包，同時使用時的名稱也得變~
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')

        }),
        // 將某個dll文件打包輸出去，并在html中自動引入該資源
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ],
    // 模式  development  開發環境，production 生產環境
    mode: 'development',
    // 生產環境下會自動壓縮js代碼
    // mode: 'production'

};

核心配置

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

    ……
    
// 引入webpack
const webpack = require('webpack');
// 引入add-asset-html-webpack-plugin
const AddAssetHtmlWebpackPlugin =require('add-asset-html-webpack-plugin');

    ……

    // plugins的配置
    plugins: [
        // 詳細的plugins配置

        // 告訴webpack哪些庫不參與打包，同時使用時的名稱也得變~
        new webpack.DllReferencePlugin({
            manifest: resolve(__dirname, 'dll/manifest.json')

        }),
        // 將某個dll文件打包輸出去，并在html中自動引入該資源
        new AddAssetHtmlWebpackPlugin({
            filepath: resolve(__dirname, 'dll/jquery.js')
        })
    ],

webpack.DllReferencePlugin：獨立打包的dll庫，不在打包到輸出的chunk中。
AddAssetHtmlWebpackPlugin：在html中引入指定獨立打包的dll庫資源，并將該資源獨立打包出去。

2.2、其他工程文件

<!-- ./src index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello dll</h1>
</body>
</html>

// 入口文件
// ./src/index.js
import { $ } from 'jquery';

console.log($);

2.3、構建打包

> npx webpack 

2.4、工程文件目錄

.
├── build   //構建打包生成的目錄
│   ├── built.js     
│   ├── index.html
│   └── jquery.js   //獨立打包，并在html中被引入的jquery庫資源
├── dll    // 打包后生成的目錄
│   ├── jquery.js    // 根據webpack.dll.js配置獨立打包出來的jquery
│   └── manifest.json   //映射文件
├── src
│   ├── index.html
│   └── index.js       // 入口文件，使用jquery包
├── webpack.config.js
└── webpack.dll.js    //打包配置文件

// 入口文件
// ./src/index.js
import { $ } from 'jquery';

console.log($);

<!-- 生成的 index.html 文件，./build/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1 id="title">hello dll</h1>
    <script src="built.js"></script>
    <!-- AddAssetHtmlWebpackPlugin 插件引入的資源 -->
    <script src="jquery.js"></script>
</body>
</html>