webpack性能优化简要
2023-02-18 16:39:31 时间
1.优化loader的查找范围
- test: 匹配特定条件。一般是提供一个正则表达式或正则表达式的数组,但这不是强制的
- include(推荐): 匹配特定条件。一般是提供一个字符串或者字符串数组,但这不是强制的
- exclude(**优先级最高): ** 排除特定条件。一般是提供一个字符串或字符串数组,但这不是强制的
{
test: /\.css$/,
include: [
path.resolve(__dirname, "app/styles"),
path.resolve(__dirname, "vendor/styles")
]
}
优化方案
通过缩小模块的查找范围来减少查找时间
2.优化第三方模块的查找范围
- resolve.modules 解析模块时应该搜索的目录
module.exports={
resolve:{
modules: [path.resolve(__dirname, "./node_modules")]
}
}
优化方案
通过指定解析模块的搜索目录来屏蔽调module向上查找增加的的耗时
3.优化导入模块目录层级多增加的耗时
- resolve.alias 通过配置别名来确保模块引入变得更简单
resolve: {
alias: {
"@": path.join(__dirname, "./pages"),
"@assets": path.resolve(__dirname, "../src/images/"),
},
},
优化方案:
通过使用别名(指明了目录/文件)来导入模块使得模块的递归解析时间缩短
4.优化导入模块未指明后缀增加的耗时
resolve.extensions
此配置在用户导入模块不携带后缀时会根据配置项中的后缀进行匹配查找
// v5.25.1版本默认值
extensions: [".js", ".json"]
优化方案
- 使用合理的后缀列表
- 导入模块时指明后缀5.使用多线程thread-loader 配置到耗时的loader中使得耗时loader可以在线程池中运行
安装 thread-loader:
npm install --save-dev thread-loader
用法:
把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行
示例:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve("src"),
use: [
"thread-loader",
"expensive-loader"
]
}
]
}
}
6.使用缓存优化babel-loader
babel-loader 提供了 cacheDirectory 配置给 Babel 编译时给定的⽬录,并且将⽤于缓存加载器的结 果,但是这个设置默认是 false 关闭的状态,我们需要设置为 true ,这样 babel-loader 将使⽤默认的 缓存⽬录 。
安装 babel-loader:
webpack 3.x | babel-loader 8.x | babel 7.x
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-env webpack
示例:
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true
},
}
];
7.使用terser-webpack-plugin开启多线程和缓存
安装terser-webpack-plugin:
npm install terser-webpack-plugin --save-dev
示例:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
cache: true, // 开启缓存
parallel: true // 多线程
})
]
}
};
8.通过使用externals来减少依赖项> 防止将某些import的包打包到bundle中,而是在运行时去外部获取这些依赖
例如,从 CDN 引入 jQuery,而不是把它打包: index.html
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
webpack.config.js
externals: {
jquery: 'jQuery'
}
依赖使用不变
import $ from 'jquery';
$('.my-element').animate(...);
相关文章
- C语言|关键字
- 考试套件安装教程
- 客快物流大数据项目(一百):ClickHouse的使用
- 博客优化2|网站的资源分布以及小技巧
- 教你如何使用Topaz全家桶优化视频|图片等的安装教程
- 软件分享 | 第十五期 视频号下载器
- 不规则图形背景排版高阶技巧 -- 酷炫的六边形网格背景图
- 图查询语言 nGQL 简明教程 vol.01 快速入门
- 软件分享 | 第十八期 无损音乐下载(电脑端)
- 【算法竞赛】Codeforces Round #841 (Div. 2) C, E
- Matlab期末大作业(代码醇香版) – 学金融的文史哲小生
- 如何玩转Sharelist – 学金融的文史哲小生
- 客快物流大数据项目(一百零一):实时OLAP开发
- Java判断null的几种方式
- STM32 JLink或函数 对程序进行简单的读写保护和擦除
- Axure RP 9 for Mac(交互式原型设计软件) v9.0.0.3728中文版
- Keil系列教程11_工程窗口图标说明
- 问题解决丨对不起,小米路由器出现网络连接问题无法打开网页
- 软件分享 | 第二十二期 文库download(电脑端)
- Koa-static 设置静态文件缓存