webpack优化方案

1. 优化开发体验

1-1. 加快构建速度

① 缩小文件搜索范围

  • 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和exclude去缩小;
  • resolve.modules用于配置 Webpack 去哪些目录下寻找第三方模块:[path.resolve(__dirname, 'node_modules')](根目录下);
  • resolve.mainFields用于配置第三方模块使用哪个入口文件:['mian'];
  • resolve.alias配置项通过别名来把原导入路径映射成一个新的导入路径:[path.resolve(__dirname, './node_modules/react/dist/react.min.js')];
  • resolve.extensions用于配置在尝试过程中用到的后缀列表:['js', 'json'];
  • module.noParse配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理:[/react\.min\.js$/]; 

② HappyPack

  • HappyPack 的核心原理就是把loader转换任务分解到多个进程去并行处理,从而减少了总的构建时间;

③ ParallelUglifyPlugin

  • 压缩js代码需要先把代码解析成用 Object 抽象表示的 AST 语法树,再去应用各种规则分析和处理 AST;
  • ParallelUglifyPlugin会开启多个子进程,把对多个文件的压缩工作分配给多个子进程去完成,每个子进程其实还是通过 UglifyJS 去压缩代码,但是变成了并行执行;

1-2. 提升开发效率

① 自动刷新(webpack 模块负责监听文件,webpack-dev-server 模块则负责刷新浏览器)

  • 文件监听(--watch或watch: true),原理是定时的去获取这个文件的最后编辑时间,每次都存下最新的最后编辑时间,如果发现当前获取的和最后一次保存的最后编辑时间不一致,就认为该文件发生了变化;
  • 优化文件监听:watchOptions: {ignored: /node_modules/};
  • 自动刷新原理是往要开发的网页中注入代理客户端代码,通过代理客户端向DevServer 发起的 WebSocket 连接去刷新整个页面;
  • devServer.inline是用来控制是否往 Chunk 中注入代理客户端的,默认会注入;在你关闭了 inline 后,DevServer 会自动地提示你通过新网址 http://localhost:8080/webpack-dev-server/ 去访问;

② 模块热替换

  • 模块热替换的原理和自动刷新原理类似,都需要往要开发的网页中注入一个代理客户端用于连接 DevServer 和网页, 不同在于模块热替换独特的模块替换机制;

2. 优化输出质量

2-1. 减少加载时间

① 区分环境

  • process.env.NODE_ENV

② 压缩代码

③ CDN加速

  • 针对 HTML 文件:不开启缓存,把 HTML 放到自己的服务器上,而不是 CDN 服务上,同时关闭自己服务器上的缓存。自己的服务器只提供 HTML 文件和数据接口;
  • 针对静态的 JavaScript、CSS、图片等文件:开启 CDN 和缓存,上传到 CDN 服务上去,同时给每个文件名带上由文件内容算出的 Hash 值;

④ tree shaking

  • 让 Tree Shaking 正常工作的前提是交给 Webpack 的js代码必须是采用 ES6 模块化语法的, 因为 ES6 模块化语法是静态的(导入导出语句中的路径必须是静态的字符串,而且不能放入其它代码块中),这让 Webpack 可以简单的分析出哪些export的被import过了

⑤ 提取公共代码(CommonsChunkPlugin)

⑥ 按需加载

2-2. 提升流畅度

① Prepack

  • 通过 Babel 把 JavaScript 源码解析成抽象语法树(AST),以方便更细粒度地分析源码;
  • Prepack 实现了一个 JavaScript 解释器,用于执行源码。借助这个解释器 Prepack 才能掌握源码具体是如何执行的,并把执行过程中的结果返回到输出中。

② Scope Hoisting

webpack构建流程

  1. 初始化(启动构建,读取并合并配置参数,加载plugin,实例化compiler)
  2. 编译(entry出发,针对每个module引用loader解析,依次找到module依赖,然后递归)
  3. 输出(对编译后的module组合成chunk,转换成文件,输出)
  4. 文件变化,转到step2;

浅谈webpack优化的更多相关文章

  1. 浅谈SQL优化入门:3、利用索引

    0.写在前面的话 关于索引的内容本来是想写的,大概收集了下资料,发现并没有想象中的简单,又不想总结了,纠结了一下,决定就大概写点浅显的,好吧,就是懒,先挖个浅坑,以后再挖深一点.最基本的使用很简单,直 ...

  2. 浅谈SQL优化入门:1、SQL查询语句的执行顺序

    1.SQL查询语句的执行顺序 (7) SELECT (8) DISTINCT <select_list> (1) FROM <left_table> (3) <join_ ...

  3. 浅探webpack优化

    由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相 ...

  4. 浅谈sql优化

    问题的发现:      菜鸟D在工作的时候发现项目的sql语句很怪,例如 : select a.L_ZTBH, a.D_RQ, a.VC_BKDM, (select t.vc_name from tb ...

  5. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  6. 浅谈Webpack模块打包工具四

    Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...

  7. 浅谈数据库优化方案--表和SQL

    1.数据类型的选择 1.字段最好设置为非空.若字段为char(8),即便是NULL也会现有8个字符的空间. 2.尽量使用数字型字段,若只含数值信息的字段尽量不要设计为字符型,这会降低查询和连接的性能, ...

  8. 浅谈TCP优化

    原文地址:http://kb.cnblogs.com/page/197406/ 很多人常常对TCP优化有一种雾里看花的感觉,实际上只要理解了TCP的运行方式就能掀开它的神秘面纱.Ilya Grigor ...

  9. 浅谈TCP优化(转)

    很多人常常对TCP优化有一种雾里看花的感觉,实际上只要理解了TCP的运行方式就能掀开它的神秘面纱.Ilya Grigorik 在「High Performance Browser Networking ...

随机推荐

  1. ibatis 中#和 $ 符号的区别

    1.数据类型匹配 #:会进行预编译,而且进行类型匹配(自动确定数据类型): $:不进行数据类型匹配. 2.实现方式: # 用于变量替换(先生成一个占位符,然后替换) select * from use ...

  2. Flum入门必备知识

    1.flume概念 flume是分布式的,可靠的,高可用的,用于对不同来源的大量的日志数据进行有效收集.聚集和移动,并以集中式的数据存储的系统. flume目前是apache的一个顶级项目. flum ...

  3. C# 生成四位数字字母混合验证码

    private static void Rand() { var arr = new List<string>(); ; i < ; i++) { arr.Add(i.ToStrin ...

  4. PL/SQL Developer登入时候报ORA-12638

    在client安装目录,找到打开sqlnet.ora 在里面找到 SQLNET.AUTHENTICATION_SERVICES= (NTS)将其更改为: SQLNET.AUTHENTICATION_S ...

  5. Oracle安装部署之 6节点11g cluster环境搭建

    **********************集群规划*************************************** --配置主机,共需要8台主机,其中6台做grid集群,1台作为存储服 ...

  6. 转!idea启动后发现tomcat前面出现红色或是灰色的问号

    原博文地址:https://blog.csdn.net/z_zhy/article/details/83068168 直接在idea里 点击File------settings,在搜索框直接搜tomc ...

  7. wget全站抓取命令

    wget -r -p -np -k http://www.freebuf.com/ 忽视,避开robots.txt,加一个-e robots=off 用wget避开robots.txt的下载限制 wg ...

  8. SaltStack系列(三)之state相关介绍

    一.管理对象 saltstack系统中管理对象叫做Target,在master上可以采用不同的Tatget去管理不同的minion.这些Target都是通过去管理和匹配Minion的ID来做一些集合. ...

  9. java程序运行一段时间之后停止

    原创文章,未经作者允许,禁止转载!!!!!!! 如何用java是一段代码运行一段时间之后自动停止运行? 就拿打印随机函数的代码来做例子吧,让程序随机打印1-10的数字,打印十秒钟后停止打印: publ ...

  10. E题:Water Problem(快速幂模板)

    题目大意:原题链接  题解链接 解题思路:令x=x-1代入原等式得到新的等式,两式相加,将sin()部分抵消掉,得到只含有f(x)的状态转移方程f(x+1)=f(x)+f(x-2)+f(x-3),然后 ...