大家好，我是风骨，今天和大家分享一篇有关「前端性能优化」的话题。作为优秀的前端工程师，我们需要时刻关注页面性能指标，并持续优化。 在这篇文章中，我们将深入探讨前端性能优化的各个方面，包括但不限于衡量性

分享关于 Webpack 内部工作细节，希望这能让 Webpack 更加易于上手。你将学习到懒加载是怎么实现的，tree shaking 是如何工作的，以及某些 loader 是如何工作的等等。

一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确

从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。 Loa…

做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两

webpack 的核心配置的创建和修改基于一个有潜在难于处理的 JavaScript 对象。虽然这对于配置单个项目来说是没有什么问题的，但当你团队中有比较多项目，并且尝试所有项目共享 webpack 配置文件时，你会觉难以入手，因为你需要考虑构建配置的可扩展性，比如某个子项目有…

这是 webpack4 文档中 tree-shaking 部分的介绍：https://v4.webpack.js.org/guides/tree-shaking/，你可以先快速过一遍来了解一下什么是 tree-shaking。 tree-shaking 是一个术语，通常指在 J…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

三. tree-shaking实践 webpack2 发布，宣布支持tree-shaking，webpack 3发布，支持作用域提升，生成的bundle文件更小。 再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的 升级完之后，b…