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提取公共资源内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
这篇文章主要介绍了JavaScript字符串操作方法 slice、substr、substring及其IE兼容性 的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了如何利用JavaScript实现一个简单的投票demo，文中的示例代码讲解详细，对我们学习有一定参考价值，需要的可以参考一下2022-06-06
这篇文章主要介绍了ES2020 新特性(种草),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现导入导出excel文件的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-07-07
下面小编就为大家带来一篇JS 调试中常见的报错问题解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
一般GridView第一列是多选框CheckBox，负责标记当前行是否被选中，后面可以有文本框TextBox，下拉框DropDownList，标签Lable2009-04-04
这篇文章主要介绍了微信小程序如何实现在线客服功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
相信使用过jQuery的朋友都知道index()方法, 她可以很方便的帮你找到当前元素在元素集合中索引位置. 那么, 原生JavaScript中如何获取呢?2010-09-09
这篇文章主要介绍了Javascript 动态样式控制方法。文章总结了两个方法使用style属性来设置和定义好类选择器的样式,通过元素的ClassName属性来设置其Class属性值,需要的朋友可以参考一下2022-03-03
非常不错的，收藏效果代码，增加当前页的现实，实现对比2008-08-08
最新评论