前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 现有目录结构如下： └── js/ └── a.js 规律 1. 找到 js/目录下的所有 .js 文件 2. 压缩这些 js 文件 3. 将压缩后的代码另存在 dist/js/ 目录下 目录下 编写 gulp 代码 // 压缩 JavaScript 文件 gulp.task('script', function() { // 1. 找到 gulp.src('js/*.js') // 2. 压缩 .pipe(uglify()) // 3. 另存 .pipe(gulp.dest('dist/js')); }); 代码执行结果 └── a.js gulp 入门指南 - 1 - 本文档使用 看云 构建 a.js 压缩前 function demo (msg) { alert('--------\r\n' + msg + '\r\n--------') } demo('Hi') a.js 压缩后 function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

解析一个模块，thread- loader 会将它及它的依赖分配给 worker 线程中 多进程/多实例：并行压缩 方法一：使用 parallel-uglify-plugin 插件 多进程/多实例：并行压缩 方法二：uglifyjs-webpack-plugin 开启 parallel 参数 多进程/多实例：并行压缩 方法三：terser-webpack-plugin 开启 parallel 参数 分包：设置 配置 合理使用 alias 图片压缩 使用：配置 image-webpack-loader 要求：基于 Node 库的 imagemin 或者 tinypng API Imagemin的优点分析 可以引入更多第三方优化插件，例如pngquant 有很多定制选项 可以处理多种图片格式 Imagemin的压缩原理 pngquant: 是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG 位PNG 文件小60-80％）的更高效的8位PNG格式，可显著减小文件大小。 pngcrush:其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG IDAT数据 流的大小。 optipng:其设计灵感来自于pngcrush。optipng可将图像文件重新压缩为更小尺寸，而不 会丢失任何信息。 tinypng:也是将24位png文件转化为更小有索引的8位图片，同时所有非必要的metadata

'img/[name][hash:8].[ext] ' + } }] } ] } }; 代码压缩 HTML 压缩 CSS 压缩 JS 压缩 view-source:https://now.qq.com/pcweb/index.html JS ⽂文件的压缩 内置了了 uglifyjs-webpack-plugin CSS ⽂文件的压缩 使⽤用 optimize-css-assets-webpack-plugin /\.css$/g, + cssProcessor: require('cssnano’) + }) ] }; 同时使⽤用 cssnano html ⽂文件的压缩 修改 html-webpack-plugin，设置压缩参数 module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output:

eslint-loader，构建时检查 JS 规范 webpack 打包库和组件 webpack 除了了可以⽤用来打包应⽤用，也可以⽤用来打包 js 库 实现⼀一个⼤大整数加法库的打包 · 需要打包压缩版和⾮非压缩版本 ·⽀支持 AMD/CJS/ESM 模块引⼊入 库的⽬目录结构和打包要求 + |- /dist + |- large-number.js + |- large-number webpack.config.js + |- package.json + |- index.js + |- /src + |- index.js 打包输出的库名称: ·未压缩版 large-number.js ·压缩版 large-number.min.js ⽀支持的使⽤用⽅方式 ⽀支持 CJS ⽀支持 ES module ⽀支持 AMD import * as largeNumber "default", libraryTarget: "umd" } }; library: 指定库的全局变量量 libraryTarget: ⽀支持库引⼊入的⽅方式 如何指对 .min 压缩 通过 include 设置只压缩 min.js 结尾的⽂文件 module.exports = { mode: "none", entry: { "large-number": "./src/index.js"

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

(Async) ·html-webpack-plugin-after-emit (Async) 编写一个压缩构建资源为zip包的插件 要求： ·生成的 zip 包文件名称可以通过插件传入 ·需要使用 compiler 对象上的特地 hooks 进行资源的生成 准备知识：Node.js 里面将文件压缩为 zip 包 使用 jszip (https://www.npmjs.com/package/jszip)

Loader 和插件 07 实战篇：React 全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 商城的性能优化策略略 · 渲染优化 ·个⼈人中⼼心⻚页预渲染 · ⾸首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染 · 弱⽹网优化 · 使⽤用离线包、PWA 等离线缓存技术 · Webview 优化 · 打开 Webview 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize

单元测试与测试覆盖率 单纯的测试框架，需要断言库 集成框架，开箱即用 极简 API ·chai ·should.js ·expect ·better-assert 编写单元测试用例 技术选型：Mocha + Chai 测试代码：describe, it, except 测试命令：mocha add.test.js add.test.js const expect = require('chai') Code Review 的流程 良好的 Git commit 规范优势： ·根据 Git Commit 的元数据生成 Changelog ·后续维护者可以知道 Feature 被修改的原因 技术方案 提交格式要求 本地开发阶段增加 precommit 钩子 安装 husky 通过 commitmsg 钩子校验信息 npm install husky --save-dev "scripts":