Lindz
[原文地址](https://github.com/happylindz/blog/issues/8) # webpack 大型应用优化实践 ## 前言 最近在团队分享一些 webpack 技巧，于是便准备梳理出一篇博文总结一下，不过由于讲的内容太多了，无法描述的很详细，更多地是提供一个思路，希望读者感兴趣可以动手去实践实践。 ## 我认为理想的 webpack 配置： 配置多份 webpack 配置，通过 webpack-merge 进行合并， ``` ├── common.js ├── dll.config.js ├── webpack.base.config.js ├── webpack.dev.config.js ├── webpack.prod.config.js //...
[原文地址](https://github.com/happylindz/blog/issues/1) # 你可能不知道的 Promise 对象 这里不会介绍关于 Promise 相关的基础知识，如果你想学习 Promise 的话，建议看这篇文章 [Promise 对象 - ECMAScript 6入门](http://es6.ruanyifeng.com/#docs/promise) ## 一、resolve 后的执行情况 无论是 resolve, reject，都会将函数剩余的代码执行完 ```javascript const promise = new Promise((resolve, reject) => {...
[原文地址](https://github.com/happylindz/blog/issues/4) # 剖析单页面应用路由实现原理 ## 前言 如今 React, Vue 等视图层框架大行其道，为前端开发提供了不少便利性，但是仅仅只是这些的话，缺少完善的前端路由系统，在单页应用中，我们希望能够通过前端路由来控制整个单页面应用，而后端仅仅只是获取数据接口。本文主要围绕以下三个问题来进行阐述： 1. 单页面应用为什么需要路由系统？ 2. 单页面应用路由实现原理是什么？ 3. 如何实现一个简单的 react-router？ 接下来我们围绕一个简单的例子展开，通过路由原理将其实现。 如果觉得本文有帮助，可以点 star 鼓励下，本文所有代码都可以从 github 仓库下载，读者可以按照下述打开: ```bash git clone https://github.com/happylindz/blog.git cd blog/code/router yarn ```...
[原文地址](https://github.com/happylindz/blog/issues/6) # 深入理解 webpack 文件打包机制 ## 前言 最近在重拾 webpack 一些知识点，希望对前端模块化有更多的理解，以前对 webpack 打包机制有所好奇，没有理解深入，浅尝则止，最近通过对 webpack 打包后的文件进行查阅，对其如何打包 JS 文件有了更深的理解，希望通过这篇文章，能够帮助读者你理解： 1. webpack 单文件如何进行打包？ 2. webpack 多文件如何进行代码切割？ 3. webpack1 和 webpack2 在文件打包上有什么区别？ 4. webpack2 如何做到...
[原文地址](https://github.com/happylindz/blog/issues/15) ## 前言 最近在给团队对 webpack 中的 sideEffects 字段用途进行微分享，于是乎，我最后就整理成一篇文章，希望帮助更多的人理解 sideEffects 的作用。 sideEffects 是什么呢？我用一句话来概括就是：让 webpack 去除 tree shaking 带来副作用的代码。 听起来有点绕口，让我们划出重点：tree shaking/用法/副作用 ## tree shaking tree shaking 是一种代码优化技术，它能够将无用的代码进行去除，下面举个简单的例子： ```javascript // a.js export const...
[原文地址](https://github.com/happylindz/blog/issues/14) # React 同构应用 PWA 升级指南 ## 前言 最近在给我的博客网站 PWA 升级，顺便就记录下 React 同构应用在使用 PWA 时遇到的问题，这里不会从头开始介绍什么是 PWA，如果你想学习 PWA 相关知识，可以看下下面我收藏的一些文章： * [您的第一个 Progressive Web App](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=zh-cn#app_shell_4) * [【Service Worker】生命周期那些事儿](https://75team.com/post/lifecycle.html) * [【PWA学习与实践】(1) 2018，开始你的PWA学习之旅](https://juejin.im/post/5ac8a67c5188255c5668b0b8) *...
[原文地址](https://github.com/happylindz/blog/issues/13) # 让 BAT Offer 不再难拿 最近有幸受老师邀请，总结一篇关于应届生校招求职的文章，我将它分享出来，希望可以帮助到跟我曾经一样找工作迷茫的同学。 ## 个人介绍 首先介绍一下个人情况，我是某双一流大学的学生，专业是软件工程，在大学期间一直学习从事 Web 前端相关的工作，大三暑期曾在深圳腾讯实习三个月，秋招非常荣幸先后收获阿里、腾讯、头条、美团等企业 offer，最终选择到阿里工作，接下来我就从一名前端工程师的角度来谈谈一名应届生应该如何去获得大公司的校招 offer。 ## 面试流程 大公司面试无论是实习还是校招，普遍存在面试轮次多，面试周期长的特点，就拿腾讯来说，如果你想成为暑期实习生，大概需要四到五轮面试，3-4 轮技术面+一轮 HR 面试，每次面试时间大概在 0.5-1 小时之间，推荐对自己能力没有把握或者缺少工作经验的同学尽可能在大三下学期找找实习，去自己想去的公司实习，因为大三的暑期实习既可以丰富你的履历，并且实习期间好好表现都是可以相对容易地通过转正，拿到校招 offer。 在申请实习或者校招 offer 的时候，尽可能多找人帮忙内推(ps: 实在找不到人的话可以找我)，因为大公司部门比较多，你如果直接从官网上网申的话，简历不容易被人查看，找认识的师兄师姐帮忙内推的优势在于： 1. 能够更有效增加你的简历的曝光，让部门主管能够直接查阅到你的简历 2....
[原文地址](https://github.com/happylindz/blog/issues/11) # 深入理解 CSS 属性 z-index ## 前言 最近在使用 CSS3 动画的时候遇到一个 DOM 层叠的问题，故此重新学习了一下 z-index，感觉这个 CSS 属性还是挺复杂的，希望本文可以帮助你重新认识 z-index 的魅力。 事情的经过是这样的(背景有点长)，最近在写下面这样的列表页：  然后给每个产品项添加一个 CSS3 动画，动画效果大概像这样: [demo 地址](https://codepen.io/jasonheecs/pen/GNNwpZ) 实现后的效果大概是这样的(截图有点糊，建议点 demo 地址查看)：  在...
[原文地址](https://github.com/happylindz/blog/issues/10) # 深入理解 ES6 模块机制 ## 前言 在 ES6 中，我们知道 ```import、export``` 取代了 ```require、module.exports``` 用来引入和导出模块，但是如果不了解 ES6 模块特性的话，代码可能就会运行出一些匪夷所思的结果，下面我将通过这篇文章为你揭开 ES6 模块机制特点。 ## ES6 模块特性 基础的 ES6 模块用法我就不介绍了，如果你还没使用过 ES6 模块的话，推荐看：[ECMAScript 6 入门 - Module...
[原文地址](https://github.com/happylindz/blog/issues/9) # 常见前端面试题总结 (一) ## 一、W3C 标准盒模型和 IE 盒模型区别： * W3C 标准盒模型： 盒子的高宽是由盒子的内容区仅由 width, height 决定的，不包含边框，内外边距。  * IE 盒模型：  在 IE 盒模型中，盒子宽高不仅包含了元素的宽高，而且包含了元素的边框以及内边距。 所以在同样的设置下，IE 下的元素会看起来相对于标准盒子来的小，如果你想要标准盒子变为像 IE 盒模型，可以对元素样式进行设置： ```css .item...