前端开发环境、运行环境

目录

开发环境

一、git

二、Chrome调试工具

三、抓包

四、webpack babel

1、webpack

2、babel

3、模块加载方案比较（ES6的Module和CommonJS）

五、linux常用命令

运行环境

一、网页加载过程

1、浏览器从输入URL到页面渲染的整个流程

2、浏览器渲染机制

3、重排/回流、重绘

二、性能优化

1、性能优化原则

2、性能优化方法

3、防抖和节流

三、安全

1、XSS跨站脚本攻击

2、CSRF/XSRF跨站请求伪造攻击

3、sql注入攻击

---

开发环境

一、git

git add .

git branch

git checkout XX

git checkcout -b XX

git commit -m "XX"

git push origin master

git pull origin master

git merge XX

二、Chrome调试工具

Elements Console debugger Network Application

三、抓包

移动端H5查看网络请求，需要用工具抓包。

Windows一般用fiddler，Mac OS一般用charles

四、webpack babel

1、webpack

webpack打包工具（重点在于配置和使用，原理并不高优。只在开发环境应用，不在线上环境运行），压缩整合代码，让网页加载更快。

前端代码为什么要进行构建和打包？

体积更好（Tree-shaking、压缩、合并），加载更快

编译高级语法（scss、TS、ES6+、模块化）

兼容性和错误检查（Ployfill、postcss、eslint）

统一高效的开发环境，统一的构建流程和产出标准，集成公司构建规范（提测、上线）

基本配置、高级配置

1）基本配置

拆分配置和merge：common dev prod配置

启动本地服务 webpack-dev-server

处理ES6 babel-loader

处理样式 style-loader css-loader less-loader postcss-loader（loader执行顺序从后往前）

处理图片 file-loader url-loader

2）高级配置

多入口

抽离css

抽离公共代码

异步加载js（懒加载）

处理JSX babel-loader

处理Vue vue-loader

3）module chunk bundle分别是什么意思？区别？

module 各种源码文件，webpack中一切皆模块，被引入的都可以看作模块，js、css、img

chunk 多模块合成的（类似在内存中还没产出的代码块），entry splitChunk import()生成chunk

bundle 最终的输出文件

webpack性能优化

1）优化打包构建速度

（生产环境）

优化babel-loader：加cacheDirectory、加include或exclude

IgnorePlugin 

noParse 引入的时候避免打包的东西

happyPack 多进程打包

ParallelUglifyPlugin 多进程压缩JS

（不能用于生产环境）

自动刷新 整个网页全部刷新，速度比较慢；整个网页全部刷新，状态全丢失

热更新 新代码生效，网页不刷新，状态不丢失

DllPlugin动态链接库插件，前端框架vue React，体积大构建慢。较稳定，不常升级版本。同一个版本只构建一次即可，不用每次都重新构建。

2）优化产出代码执行效率

小图片base64编码 

bundle+hash

懒加载

提取公共代码

使用CDN加速 img、css、js推到CDN上

使用production 自动开启代码压缩；Vue和React等会自动删掉调试代码；启动Tree-Shaking

使用Scope Hosting 多个函数合并成一个函数。代码体积更小，创建函数作用域更少，代码可读性更好

构建流程概述（打包流程）

参考：web