微信公众号 手机网站贵州萝岗seo整站优化
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个场景
