前端性能和加载体验优化实践（附：PWA、离线包、内存优化、预渲染）
探讨了页面加载卡顿的原因并提出了多种优化方法。主要原因包括项目包或第三方脚本过大、JavaScript 执行阻塞页面加载、图片体积大且多等。优化策略包括构建缩包按需加载、减少图片体积等。文章还详细介绍了如何通过 Webpack 插件分析项目中用到的 npm 包及大小，以及如何通过调整图片尺寸、格式转换、压缩等方式减小图片体积。
标签： Webpack
Node.js 使用 SCP SSH 部署项目
背景
在项目部署上线的过程中，正常流程是在生成环境 Git 拉取最新代码来进行更新。但是某些极端情况下，由于内网管控的封闭性，生产环境无法拉取 GitLab 端所存储的代码，此时便只能通过 SCP 和 SSH 来曲线救国了。
"Node.js 使用 SCP SSH 部署项目"继续阅读
Webpack 只打包 CSS
背景
Webpack 作为热门前端构建打包工具，常用来构建打包应用型项目，包含 HTML、JavaScript、CSS 等代码。但是遇到比较零散的项目，往往需要单独打包某一模块，比如：CSS。
"Webpack 只打包 CSS"继续阅读
使用 Webpack 插件 webpack-bundle-analyzer 优化代码体积
一、安装
npm install webpack-bundle-analyzer --save-dev
"使用 Webpack 插件 webpack-bundle-analyzer 优化代码体积"继续阅读
使用 webpack-merge 合并 Webpack 配置
使用 Webpack 搭建项目时会配置开发、测试、预发布、生产环境，这里面充斥着大量重复的配置，例如：入口、加载器等。webpack-merge 作为 Webpack 的配置合并工具，功能类似于 JavaScript 的 Object.assign()。
"使用 webpack-merge 合并 Webpack 配置"继续阅读
使用 Babel 编译 TypeScript
使用 ts-loader 在构建打包生产代码时面对重重问题，比如 Polyfill 的自动注入等，于是转变为用 Babel 来编译 TypeScript。
一、安装 Babel
安装 Webpack 所必要的 Babel 依赖：
npm i @babel/cli @babel/core @babel/preset-env babel-loader --save-dev
"使用 Babel 编译 TypeScript"继续阅读
读书笔记:《深入理解TypeScript》 - [澳]Basarat Ali Syed 著 / 郭文超 何小磊 柳星 徐野 译
JavaScript 篇幅略多 ★★★
读完时间：2020 年 8 月 20 日
出版时间：2020 年 1 月
"读书笔记:《深入理解TypeScript》 - [澳]Basarat Ali Syed 著 / 郭文超 何小磊 柳星 徐野 译"继续阅读
Webpack 多页面 & GitLab 增量构建部署模板
multipage-template
Webpack 多页面 & GitLab 增量构建部署模板
一、入口文件
每新建个独立的页面只需要在 pages 下面新建一个文件夹即可，但必须拥有两个入口文件 index.html、index.js。
"Webpack 多页面 & GitLab 增量构建部署模板"继续阅读
创建一个新的 TypeScript 项目
一、初始化 NPM 项目
# npm npm init # git git init
二、安装 TypeScript
npm i typescript --save-dev # 查看版本 npx tsc --version
三、初始化配置文件 tsconfig.json
npx tsc --init
"创建一个新的 TypeScript 项目"继续阅读
rollup 和 webpack 环境变量的设置
一、背景
在开发一个 NPM 包时，常常需要用 rollup 打包，用 webpack 开发调试，处理环境变量的时候就需要兼容两种工具的打包方式。
"rollup 和 webpack 环境变量的设置"继续阅读