webpack 优化笔记
优化可以从哪些方面入手
1、优化开发体验
- 优化构建速度,项目庞大时构建的耗时比较久
- 优化使用体验,通过自动化手段完成一些重复工作
2、优化输出质量
- 减少用户感知到的加载时间,即首屏加载时间
- 提升流畅度,即提升代码性能
webpack 可以做哪些优化
1、缩小文件搜索范围
webpack 在启动后会从配置的 Entry 出发,解析出文件中的导入语句,再递归解析,在遇到导入语句时,webpack 会做一下操作
- 寻找对应的导入文件
- 使用配置中的 Loader 去处理文件,例如解析 js 文件用的 babel-loader
1.1 优化 Loader配置
可通过 test, include,exclude 三个配置进行优化
关于 babel-loader cacheDirectory 的配置,可参考
https://webpack.docschina.org...
1.2 优化 resolve.modules 配置
webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,resolve 配置 webpack 如何寻找模块对应的文件。resolve.modules 的默认值是 ['node_modules'], 指先去当前目录的./node_modules 目录下找对应的模块,如果没有找到,就去上一级目录../node_modules, 层层往上找。一般我们安装的第三方目录都会放在项目的根目录 ./node_modules 目录下,可以指明第三方模块的绝对路径,减少查找路径
2、使用CommonsChunkPlugin分割代码
对于多入口,将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续使用,不需要每次访问一个新页面时,再去加载一个更大的文件
3、使用动态链接库文件
将网页依赖的基础模块抽离出来,打包到一个单独的动态链接库中,一个动态链接库可以包含多个模块;
当需要导入的模块存在于某个动态链接库时,这个模块不会被再次打包,而是去动态链接库中获取
构建动态链接库
引用动态链接库
4、使用Happypack
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。HappyPack 能让 Webpack 同时间做多件事,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
webpack 优化笔记相关推荐
- webpack 实践笔记(一)--- 入门
webpack 实践笔记入门(一) [webpack官网文档地址]:(http://webpack.github.io/docs...) [实践工程地址]: (https://github.com/s ...
- webpack学习笔记1
webpack学习笔记1:基本概念 前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
- 物理机存放mysql实例原则_MySQL优化笔记(四)--表的设计与优化(单表、多表)...
前面讲了SQL优化以及索引的使用.设计优化了,那么接下来就到表的设计与优化啦!!!真实地去设计优化单表结构以及讲述多表设计基本原则(结合真实的生产环境的取舍来讲述). 文章结构:(1)单表设计与优化: ...
- vscode安装swift插件_使用 Webpack 优化 VS Code 插件加载性能
Webpack 这一 JS 模块打包神器相信大家都不陌生了.由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式,因此也可以使用 Webpack 打包,优化性能. 经过实测,经过 ...
- el-select 多选取值_数值优化|笔记整理(3)——线搜索中的步长选取方法,线性共轭梯度法...
上一节笔记传送门: 学弱猹:数值优化|笔记整理(2)--线搜索:步长选取条件的收敛性zhuanlan.zhihu.com ------------------------------------ 大 ...
- 回溯法采用的搜索策略_数值优化|笔记整理(3)——线搜索中的步长选取方法,线性共轭梯度法...
上一节笔记传送门: 学弱猹:数值优化|笔记整理(2)--线搜索:步长选取条件的收敛性zhuanlan.zhihu.com ------------------------------------ 大 ...
- 韩顺平mysql优化笔记_韩顺平 mysql优化笔记.doc
韩顺平 mysql优化笔记.doc 还剩 6页未读, 继续阅读 下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内容要点: ? 垂直分割表如果你的数据库的存储引擎是 MyISAM 的 ...
- 中科大-凸优化 笔记(lec25)-等价变换
全部笔记的汇总贴(视频也有传送门):中科大-凸优化 ∇fT(x∗)(y−x)≥0\nabla f^T(x^*)(y-x)\ge0∇fT(x∗)(y−x)≥0线性规划的解在边界上 一.等价变换 例:食谱 ...
- 凸优化笔记(1) —— 基本概念
凸优化笔记 -- 基本概念之凸集 1. 数学优化 基本概念 2.1 凸优化问题 2.2 线性函数与凸函数 2.3 凸集 仿射集. 2.3.2 凸集 2.3.3锥 三种集合的比较: 基本准备 本科没学过 ...
最新文章
- php文件下载脚本,PHP文件下载实例代码浅析
- LeetCode - Reverse Bits
- 3400g主机用linux系统,最强整合平台!锐龙5 3400G小钢炮主机配置推荐
- springboot多环境加载yml和logback配置
- 【HYSBZ - 1192】鬼谷子的钱袋(水题,二进制)
- 转】MyEclipse使用总结——在MyEclipse中设置jsp页面为默认utf-8编码
- cuda tensorflow版本对应_Windows10下安装tensorflow-gpu(2.2.0)安装教程(避坑+保姆式教学)...
- windows 播放MP3音乐
- mysql orderitems_【Mysql】教程全解(三)ORDER BY 排序
- 思科BFD协议帮助侦测网络失败
- 一种单片机支持WiFi的应用——SimpleWiFi在单片机中的应用
- Auto CAD指定线段长度和角度的方法
- 【雷达装备】A800 无人机探测雷达
- 三相并网逆变器PI控制——离网模式
- win10系统计算机物理地址,Win10如何修改物理地址?Win10修改网卡物理地址(MAC)的两种方法...
- MacBook Pro M1 安装 VMware Fusion 及 CentOS 8
- 连接树莓派后斐讯k2路由cpu占用100%
- php打印直角三角形,中考几何丨通过构造直角三角形斜边上的中线结合中位线解决问题!...
- 转载至:http://blog.csdn.net/antony9118/article/details/51425581
- ai怎么让图片任意变形_ai文字怎么随意变形?ai文字变形技巧教程