Webpack提取页面公共资源的实现
更新时间：2023年01月25日 11:33:06 作者：aiguangyuan
本文主要介绍了Webpack提取页面公共资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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，也要进行配置。
到此这篇关于Webpack提取页面公共资源的实现的文章就介绍到这了,更多相关Webpack提取公共资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解Howler.js Web音频播放终极解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JavaScript设计模式之调停者模式,详细分析了调停者模式的概念、原理、优缺点并结合javascript实例形式给出了相关使用技巧,需要的朋友可以参考下2018-02-02
这篇文章主要为大家详细介绍了基于JavaScript的简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
下面小编就为大家带来一篇再谈javascript常见错误及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
js中的变量都是公用的没有静态变量，下面为大家介绍下变量的作用域闭包,需要的朋友可以参考下2014-05-05
这篇文章主要给大家介绍了关于JavaScript中String对象的使用方法以及实例的相关资料,文中通过实例代码介绍的非常详细,方便开发者在JavaScript开发中更好地处理字符串,需要的朋友可以参考下2022-04-04
当进行一些比较深入的前端编程的时候，不可避免地需要进行跨域操作，JSONP跨域GET请求是一个常用的解决方案，下面我们来看一下JSONP跨域是如何实现的，并且探讨下JSONP跨域的原理。2015-04-04
在默认的饼状图里面,图例legend颜色是黑色的,有时候根据ui需要,根据不同的背景色,下面这篇文章主要给大家介绍了关于echarts自定义legend样式的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要给大家通过讲解和实践,详细介绍了Promise对象的三种状态：pending（待定）、fullfilled（已兑现）、rejected（已拒绝）,并通过日志查看,展示了Promise状态的改变顺序,帮助读者更好的理解和应用Promise,需要的朋友可以参考下2024-10-10
最新评论