![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
风翻火焰
tel:13552106430
eMail:chern1992@163.com
展开
-
2019年前端性能优化清单 — 下篇
目录HTTP/2 52. 迁移到HTTPS,然后打开HTTP / 2 53. 正确部署HTTP / 2 54. 您的服务器和 CDN 是否支持 HTTP / 2 55. 是否启用了 OCSP stapling 56. 是否采用 IPv6 57. 是否正在使用 HPACK 压缩 测试和监测 58. 确保服务器上的安全性是防攻击的 59. 您是否优化了审计和调试工作流程 60. 您是否在代理浏览器和传统浏览器中测试过 61. 您是否测试了辅助功能 62. 您是转载 2020-07-02 22:45:17 · 207 阅读 · 0 评论 -
2019年前端性能优化清单 — 中篇
目录资源优化 17. 使用 Brotli 或 Zopfli 进行纯文本压缩 18. 使用响应式图像和 WebP 19. 图像是否已恰当优化 20. 视频是否已恰当优化 21. Web 字体是否已恰当优化 构建优化 22. 分清轻重缓急 23. 考虑使用 cutting-the-mustard 技术 24. 解析 JavaScript 是昂贵的,所以保持小 25. 使用无用代码移除(Tree-shaking) ,作用域提升(Scope hoisting)和代码分割(转载 2020-07-02 22:43:58 · 478 阅读 · 0 评论 -
2019年前端性能优化清单
由于全文篇幅太长,无法将所有内容一次性发布完,所以计划分成上、中、下三个篇章。上篇包括( 计划和度量、制定现实的目标 和 定义环境 ),中篇包括( 资源优化、构建优化 和 交付优化 ),下篇包括( HTTP / 2、测试和监测 和 速效方案 )。原文链接地址:Front-End Performance Checklist 2019原文作者:Vitaly Friedman译者:单车 runner 这是一篇有关年度前端性能优化的文章,包含了创建快速体验所需的所有知识,自2016年以来每年更新一次。转载 2020-07-02 22:42:32 · 350 阅读 · 0 评论 -
Webpack 大法之 Code Splitting
今天,大家要学习的内容是Webpack 大法中的Code Splitting。Code Splitting 是什么以及为什么在以前,为了减少 HTTP 请求,通常地,我们都会把所有的代码都打包成一个单独的 JS 文件。但是,如果这个 JS 文件体积很大的话,那就得不偿失了。这时,我们不妨把所有代码分成一块一块,需要某块代码的时候再去加载它;还可以利用浏览器的缓存,下次用到它的话,直接从缓存中读取。很显然,这种做法可以加快我们网页的加载速度,美滋滋!所以说,Code Splitting...转载 2020-07-02 22:40:56 · 683 阅读 · 0 评论 -
通过Scope Hoisting优化Webpack输出
Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 "作用域提升",是在 Webpack3 中新推出的功能。 单从名字上看不出 Scope Hoisting 到底做了什么,下面来详细介绍它。认识 Scope Hoisting让我们先来看看在没有 Scope Hoisting 之前 Webpack 的打包方式。假如现在有两个文件分别是util.js:export default 'Hello,Webpack';和入口文件main.j..转载 2020-07-02 22:39:27 · 230 阅读 · 1 评论 -
Tree-Shaking性能优化实践 - 原理篇
一. 什么是Tree-shaking先来看一下Tree-shaking原始的本意上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。具体来说,在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来.转载 2020-07-02 22:38:29 · 1661 阅读 · 2 评论 -
加速Webpack-缩小文件搜索范围
Webpack 启动后会从配置的 Entry 出发,解析出文件中的导入语句,再递归的解析。 在遇到导入语句时 Webpack 会做两件事情:根据导入语句去寻找对应的要导入的文件。例如require('react')导入语句对应的文件是./node_modules/react/react.js,require('./util')对应的文件是./util.js。 根据找到的要导入文件的后缀,使用配置中的 Loader 去处理文件。例如使用 ES6 开发的 JavaScript文件需要使用 bab...转载 2020-07-02 22:33:09 · 233 阅读 · 0 评论 -
多进程并行压缩代码
多进程/多实例:并行压缩使用parallel-uglify-plugin插件 uglifyjs-webpack-plugin开启 parallel 参数 terser-webpack-plugin开启 parallel 参数:推荐使用使用 parallel-uglify-plugin 插件在通过 new ParallelUglifyPlugin() 实列化时,支持以下参数配置: test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是...转载 2020-07-02 22:30:35 · 833 阅读 · 0 评论 -
Webpack优化——将你的构建效率提速翻倍
随着构建体系不断完善、构建体验不断优化,webpack 已经逐渐成为了前端构建体系的一大霸主,对于工作中的真正意义上的前端工程项目,webpack 已经成为了我们前端构建技术选型的不二选择,包括 create-react-app 以及 vue-cli 等等业内常见的脚手架工具的构建体系,也都是基于 webpack 进行了上层封装。但随着业务代码不断增加,项目深度不断延伸,我们的构建时长也会因此不断增加。渐渐的,总会有人抛出这样的结论:webpack 构建太慢了、太“重”了。就以笔者本次近期为团队优化的项目为转载 2020-07-02 22:27:34 · 916 阅读 · 1 评论 -
Webpack原理-编写Plugin
Webpack 通过 Plugin 机制让其更加灵活,以适应各种应用场景。 在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。一个最基础的 Plugin 的代码是这样的:class BasicPlugin{ // 在构造函数中获取用户给该插件传入的配置 constructor(options){ } // Webpack 会调用 BasicPlugin 实例的 apply 方法转载 2020-06-21 23:29:16 · 364 阅读 · 0 评论 -
轻松理解webpack热更新原理
一、前言 - webpack热更新Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块。HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间、提升开发体验。刷新我们一般分为两种:一种是页面刷新,不保留页面状态,就是简单粗暴,直接window.location.reload()。 另一种是基于WDS (Webpack-dev-server)的模块热替换,只需要局部刷新页面上发生变化的模块,同时可以保留当前的页面状态,比如复选框的选中状态、输入框转载 2020-06-21 23:26:16 · 12006 阅读 · 6 评论 -
【webpack进阶】你真的掌握了loader么?- loader十问
1. loader 十问在我学习webpack loader的过程中,也阅读了网上很多相关文章,收获不少。但是大多都只介绍了loader的配置方式或者loader的编写方式,对其中参数、api及其他细节的介绍并不清晰。这里有一个「loader十问」,是我在阅读loader源码前心中的部分疑问:webpack默认配置是在哪处理的,loader有什么默认配置么? webpack中有一个resolver的概念,用于解析模块文件的真实绝对路径,那么loader和普通模块的resolver使用的是同一个转载 2020-06-21 23:23:59 · 710 阅读 · 0 评论 -
webpack4 的30个步骤打造优化到极致的 react 开发环境,如约而至
这一篇文章将react和webpack4进行结合,集webpack的优势于一身,从0开始构建一个强大的react开发环境本篇所有代码线上代码react-webpack4-cook,翻译过来叫:webpack4和react的乱炖,可以跟着代码进行配置,之前有很多坑,线上代码都已经被解决了 。如果对您有帮助,不妨给个star.点赞关注不迷路前言一篇文章不写前言总感觉不太正式,大概介绍下我是怎么完成一个总的知识点的概括的把。其实很多人都有一看就会,一做就废的特点(当然也包括我在内),这个时候,你需要制转载 2020-06-21 23:22:32 · 340 阅读 · 0 评论 -
手把手教你撸一个 Webpack Loader
经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子,放进去一条丝巾,变出来一只白鸽。那这个「魔术」的过程是如何实现的呢?今天我们从 webpack 的核心概念之一 —— loader 来寻找答案,并着手实现这个「魔术」。看完本文,你可以:知道 webpack loader 的作用和原理。 自己开发贴合业务需求的 loader。什么转载 2020-06-21 23:18:19 · 705 阅读 · 0 评论 -
手把手教你撸一个简易的 webpack
背景随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的grunt,gulp。到后来的webpack和Parcel。但是目前很多脚手架工具,比如vue-cli已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好理解和使用这些工具,也方便我们在项目开发中应用。一些知识点在我们开始造轮子前,我们需要对一些知识点做一些储备工作。模块化知识首先是模块的相关知识,主要的是 es6 modules 和 commonJS模块化的规转载 2020-06-21 23:12:08 · 680 阅读 · 0 评论 -
一文掌握Webpack编译流程
本文概要 Webpack事件流机制 Webpack流程概览 Webpack流程图示 Webpack流程详解 Webpack执行流程源码分析 Webpack事件流机制Webpack是基于事件流的插件集合,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,Tapable是一个类似Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Webpack中最核心的负责编译的Compile转载 2020-06-18 19:09:42 · 3491 阅读 · 2 评论 -
webpack loader 从上手到理解系列:style-loader
什么是style-loaderstyle-loader的功能就一个,在DOM里插入一个<style>标签,并且将CSS写入这个标签内。简单来说就是这样: const style = document.createElement('style'); // 新建一个 style 标签style.type = 'text/css';style.appendChild(document.createTextNode(content)) // CSS 写入...转载 2020-06-18 19:08:36 · 1590 阅读 · 0 评论 -
webpack loader 从上手到理解系列:vue-loader
1 什么是vue-loader「vue-loader」是一个 webpack 的 loader,它允许你以一种名为单文件组件的格式撰写 Vue 组件。2 如何使用vue-loader2.1 安装vue-loadernpm install vue-loader vue-template-compiler --save-dev2.2 配置webapck// webpack.config.jsconst VueLoaderPlugin = require('vue-loa...转载 2020-06-18 19:07:44 · 907 阅读 · 0 评论 -
前端工程师都得掌握的 webpack Loader
0. 前言本文将webpack的Loader相关的知识点整理了一下,部分文字是从官方文档中直接摘录过来的,并附上自己的理解。如果觉得看起来和官方文档差不多,直接看官方文档最好啦~webpack Loaders Loader api Writing a Loader1. 简述 webpack 工作流程本文不过多描述webpack的作用和使用方法,如果还不是太熟悉,可以打开https://webpack.js.org/先熟悉一下。关于webpack的工作流程,简单来说可...转载 2020-06-18 19:06:32 · 533 阅读 · 0 评论