webpack
9篇文章 · 0订阅
  • webpack4.x最详细入门讲解
    本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 简单来说，它其实就是一个模块打包器。 如果像以前开发时一个html文件…
    CSS JavaScript Webpack
  • 「webpack 核心特性」模块热替换(HMR)
    保留在完全重新加载页面期间丢失的应用程序状态。 只更新变更内容，以节省宝贵的开发时间。 在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。 这是官方网站对于 HMR 给的解释。 下面我们来慢慢深入了解 Webp…
    Webpack
    「webpack 核心特性」模块热替换(HMR)
  • 极致编译速度，一文搞定webpack5升级
    作者在升级了webpack5以后，整体的开发体验都有了质的提升，本文主要归纳总结了创作者中心升级webpack5的流程以及分享过程中踩过的一些坑，供大家参考
    前端 Webpack
    极致编译速度，一文搞定webpack5升级
  • webpack的异步加载原理及分包策略
    webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，然后使用这个模块的时候，再创建一个 script 对象，加入到 document.head 对象中，浏览器会自动帮我们发起请求，去请求这个 js 文件，然后…
    Webpack 前端
    webpack的异步加载原理及分包策略
  • 在淘宝优化了一个大型项目，分享一些干货（Webpack，SplitChunk代码实例，图文结合）
    本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…
    Webpack
  • webpack构建流程分析
    webpack是一个强大的打包工具，拥有灵活、丰富的插件机制，网上关于如何使用webpack及webpack原理分析的技术文档层出不穷。最近自己也在学习webpack的过程中，记录并分享一下，希望对你有点帮助。 本文主要探讨，webpack的一次构建流程中，主要干了哪些事儿。 …
    Webpack
  • webpack-插件机制杂记
    webpack本身并不难，他所完成的各种复杂炫酷的功能都依赖于他的插件机制。或许我们在日常的开发需求中并不需要自己动手写一个插件，然而，了解其中的机制也是一种学习的方向，当插件出现问题时，我们也能够自己来定位。 Webpack的插件机制依赖于一个核心的库， Tapable。 在…
    Webpack
  • Webpack 原理系列九：Tree-Shaking 实现原理
    一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确
    前端 JavaScript
    Webpack 原理系列九：Tree-Shaking 实现原理
  • 聊一聊 webpack 的打包优化实践
    去年接触了公司内一个开发运行了两年多的项目，整体应用是基于 React 技术栈的，多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转，而子业务内部则是 SPA 形式。 本地开发环境下，代码改动后的热更新（增量编译）需要大概 10～20s 的时间，使…
    Webpack 性能优化
    聊一聊 webpack 的打包优化实践