前端性能和加载体验优化实践(附:PWA、离线包、内存优化、预渲染)

探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小,以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。

Webpack 只打包 CSS

介绍了如何使用 Webpack 单独打包 CSS 文件,通过设置“傀儡”入口文件 (style.js 和 index.style.html),结合 MiniCssExtractPlugin 和 HtmlWebpackPlugin 插件实现 CSS 文件的独立构建。提供了详细的配置示例,适用于处理零散项目的模块化打包需求。

使用 Babel 编译 TypeScript

介绍了如何使用 Babel 替代 ts-loader 来编译 TypeScript,以解决构建打包时的多种问题。通过安装相关 Babel 依赖并配置 .babelrc 和 tsconfig.json 文件,优化了 TypeScript 的编译流程。修改 Webpack 配置以使用 babel-loader,并添加 check-type 脚本命令以检查类型。

读书笔记:《深入理解TypeScript》 - [澳]Basarat Ali Syed 著 / 郭文超 何小磊 柳星 徐野 译

总结了 TypeScript 的优势,包括类型安全、智能提示以及对 JavaScript 的兼容性。介绍了 null 和 undefined 的差异、将 JavaScript 迁移至 TypeScript 的方法、声明文件的使用以及支持导入非代码文件的方式。同时涵盖了泛型的设计理念及使用 Conventional-Changelog 自动生成变更日志的实践。

创建一个新的 TypeScript 项目

介绍了如何初始化 NPM 项目并安装 TypeScript,通过 tsconfig.json 配置和 tsc 编译 .ts 文件。使用 Webpack 和 ts-loader 实现打包,并通过 ESLint 配置代码规范检测与修复。详细说明了各步骤的依赖安装、配置文件创建及命令运行,最后提供完整案例的 GitHub 链接用于参考和实践。