快捷導(dǎo)航

Webpack提取頁(yè)面公共資源的實(shí)現(xiàn)

更新時(shí)間：2023年01月25日 11:33:06 作者：aiguangyuan

本文主要介紹了Webpack提取頁(yè)面公共資源的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 利用html-webpack-externals-plugin 分離基礎(chǔ)庫(kù)

在做React開(kāi)發(fā)時(shí)，經(jīng)常需要引入react和react-dom基礎(chǔ)庫(kù)，這樣在打包的時(shí)候速度就會(huì)比較慢，這種情況下我們可以將這些基礎(chǔ)庫(kù)忽略掉，將它們通過(guò)CDN的方式直接引入，而不打包到bundle文件里面去。

1. 安裝插件

npm i html-webpack-externals-plugin -D

2. 引入插件

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

3. 使用插件

在 webpack 中配置如下：

module.exports = {
 
    // 其它配置項(xiàng)此處略
 
    plugins: [
        new HtmlWebpackExternalsPlugin({
            externals: [
              {
                module: 'react',
                entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js',
                global: 'React',
              },
              {
                module: 'react-dom',
                entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js',
                global: 'ReactDOM',
              },
            ]
        }),
   
    ]
};

在根頁(yè)面 index.html 文件中引入基礎(chǔ)庫(kù)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分離基礎(chǔ)庫(kù)</title>
</head>
<body>
 
    <div id="root"></div>
 
    <!-- 引入基礎(chǔ)庫(kù) -->
    <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react.min.js"></script>
    <script type="text/javascript" src="https://11.url.cn/now/lib/16.2.0/react-dom.min.js"></script>
    
</body>
</html>

2. 利用SplitChunksPlugin 分離基礎(chǔ)庫(kù)

此插件是Wabpack4內(nèi)置的，無(wú)需安裝，用于替代CommonsChunkPlugin插件。

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    // 匹配出需要分離的包
                    test: /(react|react-dom)/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

分離出來(lái)的文件名前輟為vendors，也要進(jìn)行配置。

3. 利用SplitChunksPlugin 分離依賴(lài)包

此插件是Wabpack4內(nèi)置的，無(wú)需安裝，用于替代CommonsChunkPlugin插件。

module.exports = {
    optimization: {
        splitChunks: {
            // 同步還是異步
            chunks: 'async',
            // 抽離公共包最小的大小(KB)
            minSize: 30000,
            // 抽離公共包最大的大小(KB)
            maxSize: 0,
            // 方法最小使用次數(shù)
            minChunks: 1,
            // 瀏覽器每次請(qǐng)求異步資源的次數(shù)
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    }
};

chunks 參數(shù)說(shuō)明：

1. async 異步引入的庫(kù)進(jìn)行分離（默認(rèn)）；

2. initial 同步引入的庫(kù)進(jìn)行分離；

3. all 所有引入的庫(kù)進(jìn)進(jìn)分離（推薦）；

4. 利用SplitChunksPlugin 分離頁(yè)面公共文件

此插件是Wabpack4內(nèi)置的，無(wú)需安裝，用于替代CommonsChunkPlugin插件。

module.exports = {
    optimization: {
        splitChunks: {
            // 分離的包體積的??
            minSize: 0,
            cacheGroups: {
                commons: {
                    name: 'commons',
                    chunks: 'all',
                    // 最?引?次數(shù)為2次
                    minChunks: 2
                }
            }
        }
    }
};

分離出來(lái)的文件名前輟為commons，也要進(jìn)行配置。