介绍
为什么需要打包工具?
开发时,我们会使用框架(React、Vue),ES6 模块化语法,Less/SASS 等 CSS 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS 等语法,才能运行。
所以我们需要打包工具帮我们做完这些事。
除此之外,打包工具还能压缩代码、做兼容性处理、提升代码性能等。
入口 Entry
指示 Webpack 从哪个文件开始打包
输出 Output
指示 Webpack 打包完的文件输出到哪里去,如何命名等
Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。
CSS
css-loader
:负责将 CSS 文件编译成 Webpack 能识别的模块
style-loader
:会动态创建一个 Style 标签,里面放置 Webpack 中 CSS 模块内容
配置:
将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
资源
对图片资源进行优化
将小于某个大小的图片转化成 data URI 形式(Base64 格式)
修改输出资源的路径和名称
字体
插件 Plugin
它是用来检测 js 和 jsx 语法的工具
ESLint 所有规则
webpack.config.js
HTML
自动在 html 文件里引入打包文件
开发服务器 Dev Server
自动编译代码,代码更改后立马呈现效果
模式 Mode
开发模式
-
编译代码。使浏览器能识别运行
开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源
-
代码质量检查。树立代码规范
提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。
生产模式
这个模式下我们主要对代码进行优化,让其运行性能更好。主要优化代码运行性能和打包速度。
CSS 处理
提取 CSS 成单独文件
此前 CSS 文件被打包到 JS 文件中,当 JS 文件加载时,style-loader
才会创建一个 <style>
标签来生成样式。现在用 mini-css-extract-plugin
插件来替换 style-loader
。
webpack.prod.js
CSS 兼容性处理
使用 postcss
加载器加强样式代码在旧版浏览器的兼容性。
npm i postcss-loader postcss postcss-preset-env -D
webpack.prod.js
注意:写在 css 和 less 之间
实际开发中一般不考虑旧版本浏览器,可在 package.json
设置:
CSS 压缩
使用 css-minimizer-webpack-plugin
插件
webpack.prod.js
HTML & JS 压缩
默认生产模式开启了 HTML, JS 压缩。
开发 & 生产
webpack.dev.js
运行开发模式的指令(地址可变):
webpack.prod.js
为了方便运行不同 mode 指令,可将 package.json
中 script
进行改变:
高级优化
提升开发体验
SourceMap
开发报错时,提示代码错误位置会不精准,因为代码经过压缩、混淆和合并后,生成的代码与原始源代码差异较大,使得调试非常困难。
SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。
开发模式:cheap-module-source-map
- 优点:打包编译速度快,只包含行映射
- 缺点:没有列映射
生产模式:source-map
提升打包构建速度
热模块替换 HMR
开发时修改一处代码,Webpack 默认会将所有模块全部重新打包编译,很慢。
HMR (Hot Module Replacement) 能做到只修改某处模块代码,仅它能重新打包编译,其他模块不变,这样打包速度更快。
实际开发我们使用其他 loader 来解决。 比如:vue-loader, react-hot-loader。
OneOf
打包时每个文件都会经过所有 loader 处理,尽管由于 test 正则 最终只被一个 loader 处理,但都要遍历一遍,比较慢。
OneOf
能让你匹配上 loader 后就停止。
Include/Exclude
node_modules 不需要编译直接可用,所以在对 JS 文件处理时,要排除 node_modules 下的文件。
Cache
每次打包 JS 文件都要经过 ESLint 检查 和 Babel 编译,速度较慢。我们可以缓存之前的 ESLint 检查 和 Babel 编译结果,这样第二次打包时速度就会更快了。
Thread
项目越庞大,打包速度越慢。想继续提升打包速度,主要提升 JS 打包速度,主要就是 ESLint 、Babel、Terser(自带压缩 JS 工具) 三个工具。
我们可以开启多进程同时处理 JS 文件,这样速度比单进程打包更快。(适用于大项目)
先下载 thread-loader
减少代码体积
Tree Shaking
开发时我们定义了些工具函数库,或引用第三方工具函数库或组件库。若无特殊处理,打包时会引入整个库,但实际我们可能只用了一部分功能。
Webpack 已经默认开启了这个功能,无需其他配置。
Babel
Babel 为每个文件都插入了辅助代码,使代码体积过大。Babel 对一些公共方法使用了很小的辅助代码,如 _extend
。默认情况下会被添加到每个需要它的文件中。可以将这些辅助代码作为一个独立模块,来避免重复引入。
先下载 babel/plugin-transform-runtime
插件
Image Minimizer
用 image-minimizer-webpack-plugin
压缩图片插件
无损压缩 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
有损压缩 npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
优化代码运行性能
Code Split
打包时会将所有 JS 文件打包到一个文件中,体积太大。若只渲染首页,就该只加载首页的 JS 文件。所以需要将打包生成的文件进行代码分割,这样加载的资源少,速度快。
代码分割:
- 分割文件:将打包生成的文件进行分割,生成多个 js 文件。
- 按需加载:需要哪个文件就加载哪个文件。
多入口
提取公共模块
按需加载,动态导入
单入口
开发时我们可能是单页面应用(SPA)
给动态导入文件取名
webpack.prod.js
Preload / Prefetch
即便已做代码分割,同时会使用 import 动态导入语法来进行代码按需加载(懒加载)。但加载速度还不够好,比如:用户点击按钮时才加载这个资源,若资源体积大,那么会有明显卡顿效果。
我们想在浏览器空闲时间,加载后续需要使用的资源。我们就需要用上 Preload
或 Prefetch
技术。
| Preload | Prefetch |
---|
加载时间 | 告诉浏览器立即加载资源 | 在浏览器空闲时才开始加载资源。 也可以加载下个页面的所需资源。 |
优先级 | 高 | 低 |
兼容性 | 较低 | 低 |
webpack.prod.js
Network Cache
开发时都会对静态资源使用缓存来优化,这样浏览器二次请求能直接读取缓存,但这样会有个问题,因为前后输出的文件名是一样的,都叫 main.js
,一旦将来发布新版本,因为文件名没有变化导致浏览器会直接读取缓存,不会加载新资源,项目也就没法更新了。
所以我们通过给文件名加上哈希值,确保更新前后文件名不一样,这样浏览器就会加载新资源而不是使用旧缓存。
- fullhash(webpack4 是 hash):每次修改任何一个文件,所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效。
- chunkhash:根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk,生成对应的哈希值。我们 js 和 css 是同一个引入,会共享一个 hash 值。
- contenthash:根据文件内容生成 hash 值,只有文件内容变化了,hash 值才会变化。所有文件 hash 值是独享且不同的。
Core-js
过去咋使用 Babel 对 JS 代码进行了兼容性处理。它能将 ES6 的一些语法进行编译转换,比如箭头函数、扩展运算符等。但 async 函数、promise 对象、数组的一些方法(includes)等,它没法处理。
babel.config.js
(自动按需引入)
PWA
渐进式网络应用程序 (progressive web application - PWA):是一种可以提供类似于 native app(原生应用程序)离线体验的 Web App 的技术。
参考
文档:
视频: