Webpack提取页面公共资源

news2024/12/25 0:00:14

1. 利用html-webpack-externals-plugin 分离基础库

在做React开发时，经常需要引入react和react-dom基础库，这样在打包的时候速度就会比较慢，这种情况下我们可以将这些基础库忽略掉，将它们通过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 文件中引入基础库：

<!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>分离基础库</title>
</head>
<body>

    <div id="root"></div>

    <!-- 引入基础库 -->
    <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 分离基础库

此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。

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

分离出来的文件名前辍为vendors，也要进行配置。

3. 利⽤ SplitChunksPlugin 分离依赖包

此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。

module.exports = {
    optimization: {
        splitChunks: {
            // 同步还是异步
            chunks: 'async',
            // 抽离公共包最小的大小(KB)
            minSize: 30000,
            // 抽离公共包最大的大小(KB)
            maxSize: 0,
            // 方法最小使用次数
            minChunks: 1,
            // 浏览器每次请求异步资源的次数
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                }
            }
        }
    }
};

chunks 参数说明：

1. async 异步引⼊的库进⾏分离（默认）；

2. initial 同步引⼊的库进⾏分离；

3. all 所有引⼊的库进⾏分离（推荐）；

4. 利⽤ SplitChunksPlugin 分离⻚⾯公共⽂件

此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。

module.exports = {
    optimization: {
        splitChunks: {
            // 分离的包体积的⼤⼩
            minSize: 0,
            cacheGroups: {
                commons: {
                    name: 'commons',
                    chunks: 'all',
                    // 最⼩引⽤次数为2次
                    minChunks: 2
                }
            }
        }
    }
};

分离出来的文件名前辍为commons，也要进行配置。