react概览
课程介绍
webpack
构建依赖图->bundle
首屏渲染:
减少白屏等待时间
数据、结构、样式都返回。需要服务器的支持
性能优化
***webpack干的事情
模块化开发
优势:
多人团队协作开发
可复用
单例:全局冲突
闭包
模块导入的顺序
require.js
优点:自身处理了模块依赖
缺点:前置导入,把所有的模块先导入,才能把函数执行。期望一个模块导入成功就可以做该模块做的事情。
node.js中的common.js
什么时候用什么时候导入
ES6
导出方式
export语法:
必须先声明再同时导出
或者导出一个对象,对象key的值是已经定义的变量;然后key与值命名相同。
export default语法
import语法
webpack配置启动
npm install webpack
全局有冲突问题,一般推荐是本地安装
打包原理
基础配置&强缓存
零配置下,less编译成css、图片、es6转es5都无法处理……
相对地址:./ 或 ../
绝对地址:用path模块。你电脑上的地址
hash:打包后的文件创建hash名。利于强缓存机制下资源更新。
HTML打包编译
还得把js导入进来
基础配置:
如js自动导入,并且加上defer
多入口/出口配置
*devServer
打包编译优化压缩,自己本地启动一个web服务,用本地服务先把开发东西预览。
作用:
*proxy
以前缀区分
CSS全套处理方案
less预编译成css,css兼容:css3加前缀-moz等,@import、url特殊语法导入外部资源,css打包单独成文件或内嵌……
css-loader 处理@import 和url
style-loader 加到head里
postcss-loader 兼容前缀
全局的css在入口中基于模块规范引入
*css兼容
- browserlist:配置浏览器的兼容列表。告诉他我们要兼容哪些浏览器
- postcss-loader做相关的配置
- 并且加入autoprefixer插件
合并压缩打包
*抽离css
抽离css。替换style-loader:css代码依然在js中,只是动态创建了style标签。
JS兼容与优化
webpack自己处理合并压缩打包,
我们要处理的是js的兼容性。
babel
- es6转换成es6
presets: @babel/preset-env
- 内置api
如对promise进行重写
include和exclude
图片的处理
打包到dist目录下
转成base64。图片需要先发网络请求,图片资源编码,然后渲染。(不需要网络请求也不需要编码)
我们希望webpack能帮我们做这件事情:代码里写的还是图片路径,但是最后打包后的是base64。
如果未加入loader,则webpack不会处理图片。
举例是这2个场景