快捷導(dǎo)航

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

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

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

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

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

1. 安裝插件

npm i html-webpack-externals-plugin -D

2. 引入插件

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

3. 使用插件

在 webpack 中配置如下：

module.exports = {
 
    // 其它配置項此處略
 
    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',
              },
            ]
        }),
   
    ]
};

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

<!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ǔ)庫</title>
</head>
<body>
 
    <div id="root"></div>
 
    <!-- 引入基礎(chǔ)庫 -->
    <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ǔ)庫

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

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

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

3. 利用SplitChunksPlugin 分離依賴包

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

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

chunks 參數(shù)說明：

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

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

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

4. 利用SplitChunksPlugin 分離頁面公共文件

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

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

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