如何优化webpack
2020-12-27 21:21
671 查看
一、Webpack性能优化 1、可以减少webpack打包时间 2、可以减少webpack打出来包体积 优化loader 对于 Loader 来说,影响打包效率首当其冲必属 Babel 了。因为 Babel
会将代码转为字符串生成 AST ,然后对 AST 继续进行转变最后再生成新的
代码,项目越大,转换代码越多,效率就越低。当然了,我们是有办法优化的
优化 Loader 的文件搜索范围
module.exports = {
module: {
rules: [
{
// js 文件才使用 babel
test: /.js$/,
loader: 'babel-loader',
// 只在 src 文件夹下查找
include: [resolve('src')],
// 不会去查找的路径
exclude: /node_modules/
}
]
}
当然这样做还不够,我们还可以将 Babel 编译过的文件缓存起来,下次只需要编译更改
过的代码文件即可,这样可以大幅度加快打包时间
二 、HappyPack
由于受限于 Node 是单线程运行的,所以 Webpack 在打包的过程中也是单线程
的,特别是在执行 Loader 的时候,长时间编译的任务很多,这样就会导致等
待的情况。HappyPack 可以将 Loader 的同步执行转换为并行的,这样就能充分利用系
统资源来加快打包效率了
如
module: {
loaders: [
{
test: /.js$/,
include: [resolve('src')],
exclude: /node_modules/,
// id 后面的内容对应下面
loader: 'happypack/loader?id=happybabel'
}
] },
plugins: [
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader?cacheDirectory'],
// 开启 4 个线程
threads: 4
})
]
等
相关文章推荐
- Python 利用argparse模块实现脚本命令行参数解析
- 这交互炸了:一分钟让你拥有微信拖拽透明返回PhotoView
- Python 基于lxml.etree实现xpath查找HTML元素
- Android 第一行代码赠书 [全球限量版]
- 这交互炸了:饿了么是怎么让Image变成详情页的
- Adb连接模拟器出现版本错误
- .NET 云原生架构师训练营(模块二 基础巩固 EF Core 介绍)--学习笔记
- 设计模式--->静态代理模式
- 07.1 迭代器、生成器
- wildfly 21中应用程序的部署
- AI产品经理的入门必修课(4)——知识图谱
- 框架VS架构,看两者异同
- 使用WTM框架创建博客系统后台并在云服务器发布
- 06.1 __new__ 和 __init__区别
- MySQL必会的SQL查询语句优化方法你竟然还不知道!
- [系列] Go - 统一定义 API 错误码
- [系列] Go - time.RFC3339 时间格式化
- [系列] Go - 学习 grpc.Dial(target string, opts …DialOption) 的写法
- [系列] Go - 结构(struct) 实现 接口(interface)
- 聊两句XSS(跨站脚本攻击)