webpack性能优化简要
默认文件1618847381476.png
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 webpackwebpack 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(...);本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-04-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。