DllReferencePlugin 引用 manifest.json 引用效果 在 webpack.config.js 引入 缓存 缓存思路： 目的：提升二次构建速度 · babel-loader 开启缓存 · terser-webpack-plugin 开启缓存 · 使用 cache-loader 或者 hard-source-webpack-plugin 缩小构建目标 比如 babel-loader unknown=polyfill&features=Promise,Map,Set 体积优化策略总结 Scope Hoisting Tree-shaking 图片压缩 动态 Polyfill 公共资源分离

·Module options: 模块参数，给 loader 设置扩展 ·Output options: 输出参数(输出路径、输出文件名称) ·Advanced options: 高级用法(记录设置、缓存设置、监听频率、bail等) ·Resolving options: 解析参数(alias 和 解析的文件后缀设置) ·Optimizing options: 优化参数 ·Stats options: 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成 Web Apps 开发 代码复杂度在逐步增高 部署时希望把代码优化成几个 HTTP 请求 分离的 JS文件/模块，便于后续代码的维护性 常见的几种模块化方式 CJS ES module AMD import * as largeNumber from 'large-number';

module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin 利利⽤用 SplitChunksPlugin 进⾏行行公共脚本分离 Webpack4 内置的，替代CommonsChunkPlugin插件 ]/, priority: -10 } } } } }; · async 异步引⼊入的库进⾏行行分离(默认) · initial 同步引⼊入的库进⾏行行分离 · all 所有引⼊入的库进⾏行行分离(推荐) 利利⽤用 SplitChunksPlugin 分离基础包 test: 匹配出需要分离的包 module.exports = { optimization: { splitChunks: test: /(react|react-dom)/, name: 'vendors', chunks: 'all' } } } } }; 利利⽤用 SplitChunksPlugin 分离⻚页⾯面公共⽂文件 minChunks: 设置最⼩小引⽤用次数为2次 module.exports = { optimization: { splitChunks: { minSize: 0

er#readme ⻓期缓存：确定的模块 Id、chunk 和导出名称 在生产模式下，默认的 chunkIds: “deterministic”, moduleIds: “deterministic”。设置成 deterministic 时默认最小 3 位数字会被 使用 chunkIds moduleIds webpack 5 webpack 4 ⻓期缓存：确定的模块 Id、chunk 和导出名称 持久化缓存 在 webpack 4 ⾥⾯，可以使⽤ cache-loader 将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。 webpack 5 缓存策略 • 默认开启缓存，缓存默认是在内存⾥。可以对 cache 进⾏设置 。 • 缓存淘汰策略：⽂件缓存存储在 node_modules/ node_modules/.cache/webpack，最⼤ 500MB，缓存时常两个星期，旧的缓存先淘汰。 webpack 5 webpack 4 构建优化：Tree Shaking 优化-嵌套的 Tree shaking webpack 5 webpack 4 构建优化：Tree Shaking 优化-内部模块 Tree shaking 代码⽣成：⽀持⽣成 ES6 代码 webpack

callback(null, input + input); }; 示意代码： 在 loader 中使用缓存 webpack 中默认开启 loader 缓存 ·可以使用 this.cacheable(false) 关掉缓存 缓存条件： loader 的结果在相同的输入下有确定的输出 ·有依赖的 loader 无法使用缓存 loader 如何进行文件输出？ 通过 this.emitFile 进行文件写入

Web 商城的性能优化策略略 · 渲染优化 ·个⼈人中⼼心⻚页预渲染 · ⾸首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize

API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档 (rspack.dev) • GitHub (w

"license": "ISC" } 唯⼀一缺陷：每次需要⼿手动刷新浏览器器 ⽂文件监听的原理理分析 轮询判断⽂文件的最后编辑时间是否变化 某个⽂文件发⽣生了了变化，并不不会⽴立刻告诉监听者，⽽而是先缓存起来，等 aggregateTimeout module.export = { //默认 false，也就是不不开启 watch: true, //只有开启监听模式时，watchOptions才有意义