和 bundless 的差异 02 Vite 的构建原理 03 Vite 发布 2.0 版本 更早实践 bundless 的⼯具：Snowpack 真的可以不⽤打包吗？ 浏览器对 ESM 的⽀持情况 各浏览器在 HTTP/1.1 协议下的最大并行请求数限制 HTTP/1.1 的请求数限制 HTTP/2 越来越多的应⽤在主流⽹站 bundle bundless a.js b.js 静态⽂件托管服务 文件路径：src/node/server/index.ts 处理裸导⼊（bare import）的模块路径，eg: import react from 'react'; 浏览器（只有相对路径和绝对路径）无法识别，因 此需要重写模块路径 Vite 打包流程 – 重写模块路径 文件路径：src/node/server/serverPluginModuleRewrite.ts 的开头补上一个 /@modules 的标识符。 如：import React from "/@modules/@pika/react/source.development.js" 相对路径转绝对路径，方便浏览器请求。 补齐文件扩展名和经常被省略的 index.xxx 如：import a from ’/src/a/index.js’ 给非 js 类型（js 类型：如 js(x)/ts(x)/vue）的文件地址加上

+ "watch": "webpack --watch" }, "keywords": [], "author": "", "license": "ISC" } 唯⼀一缺陷：每次需要⼿手动刷新浏览器器 ⽂文件监听的原理理分析 轮询判断⽂文件的最后编辑时间是否变化 某个⽂文件发⽣生了了变化，并不不会⽴立刻告诉监听者，⽽而是先缓存起来，等 aggregateTimeout module.export + ”dev": "webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC" } WDS 不不刷新浏览器器 WDS 不不输出⽂文件，⽽而是放在内存中 使⽤用 HotModuleReplacementPlugin插件 热更更新：使⽤用 webpack-dev-middleware const express Compile: 将 JS 编译成 Bundle HMR Server: 将热更更新的⽂文件输出给 HMR Rumtime Bundle server: 提供⽂文件在浏览器器的访问 HMR Rumtime: 会被注⼊入到浏览器器， 更更新⽂文件的变化 bundle.js: 构建输出的⽂文件 什什么是⽂文件指纹？ 打包后输出的⽂文件名的后缀 ⽂文件指纹如何⽣生成 Hash：和整个项⽬

1%", "iOS 7"] + }) + ] + } + } ] } ] } }; 浏览器器的分辨率 CSS 媒体查询实现响应式布局 缺陷：需要写多套适配样式代码 @media screen and (max-width: 980px) { .header { width: 900px; 是什什么？ 渲染: HTML + CSS + JS + Data -> 渲染后的 HTML 服务端： 所有模板等资源都存储在服务端 内⽹网机器器拉取数据更更快 ⼀一个 HTML 返回所有数据 浏览器器和服务器器交互流程 ⽤用户层现 客户端渲染 vs 服务端渲染 ����� ����� �� ����(HTML, ���) 1��� ���� HTML&������ 1�����HTML&�� react-dom/server 的 renderToString ⽅方法将 React 组件渲染成字符串串 ·服务端路路由返回对应的模板 ·打包出针对服务端的组件 webpack ssr 打包存在的问题 浏览器器的全局变量量 (Node.js 中没有 document, window) 样式问题 (Node.js ⽆无法解析 css) ·组件适配：将不不兼容的组件根据打包环境进⾏行行适配 ·请求适配：将

webpack-bundle-analyzer • webpack-stats-plugin • …… 如何从 Webpack 迁移到 Rspack？ ??? 平滑！ 得益于与 Webpack 良好的兼容性！ 如何从 Webpack 迁移到 Rspack？ ✅ 宽松模式 • 目前并不支持所有 webpack 配置，且有些配置会影响产物，为了保 证产物的正确性，Rspack 默认开启了对配置的严格校验

或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小 ·直接复⽤用

全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 为什什么需要构建⼯工具？ 转换 ES6 语法 转换 JSX 压缩混淆 ES6 module 主流浏览器器⽀支持情况 图⽚片压缩 CSS 前缀补全/预处理理器器 前端构建演变之路路 ant + YUI Tool grunt gulp fis3 webpack parcel rollup

com/FullHuman/purgecss-webpack-plugin 构建体积优化：动态 Polyfill babel-polyfill 打包后体积：88.49k，占比 29.6% Promise 的浏览器支持情况 构建体积优化：动态 Polyfill Polyfill Service原理 识别 User Agent，下发不同的 Polyfill 构建体积优化：如何使用动态 Polyfill service

用来加载模块，返回 module.exports 动手实现一个简易的 webpack 可以将 ES6 语法转换成 ES5 的语法 可以分析模块之间的依赖关系 生成的 JS 文件可以在浏览器中运行 ·通过 babylon 生成AST ·通过 babel-core 将AST重新生成源码 · 通过 babel-traverse 的 ImportDeclaration 方法获取依赖属性

}) }) gulp.task('default', ['watchjs','watchcss']) gulp-autoprefixer autoprefixer 解析 CSS 文件并且添加浏览器前缀到CSS规则里。 通过示例帮助理解 autoprefixer 处理前： .demo { display:flex; } autoprefixer 处理后： .demo {