webpack从入门到精通（高级篇）

1.提升开发体验

SourceMap技术

作用：准确找到报错位置，便于开发

用法：

开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射

缺点：没有列映射

生产模式：source-map

优点：包含行/列映射

缺点：打包编译速度更慢

2.提升打包构建速度

HMR：热更新，只更新编译的部分而不是刷新整个界面，想要实现js页面需要单独配置或者引入所需loader

oneOf：每个文件只能被其中一个loader配置处理

Include/Exclude

Include:只处理XXX文件

Exclude：处理XXX文件以外其他文件都处理

注意：只能用一种。两个同时用会报错

Cache

对eslint检查和Babel编译结果进行缓存

Thead

多进程打包：开启电脑的多个进程干一件事，速度更快

使用：

1.获取CUP的核数

2.下载包

npm i thread-loader -D

3.配置

获取cpu核数

eslint配置开启

3.减少代码体积

Tree Shaking

移除js中没有使用上的代码

Babel

@babel/plugin-transform-runtime：禁用Babel自动对每个文件的runtime注入，而是引入

1.下载包

npm i @babel/plugin-transform-runtime -D

2.配置

Image Minimizer

是什么：

image-minimizer-webpack-plugin：用来压缩图片的插件

用法：

1.下载包

npm i image-minimizer-webpack-plugin imagemin -D

无损压缩：

npm i imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D 

有损压缩：

npm i imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D 

2.配置

4优化代码运行性能

codeSplit

是什么：

代码分割：将打包生成的文件进行分割，生成多个js文件

按需加载：需要哪个文件就加载那个文件

Preload/Prefetch

在浏览器空闲时加载后续需要使用的资源

preload:告诉浏览器立即加载资源。

prefetch:告诉浏览器在空闲时才开始加载资源

共同点：

都会加载资源但不执行

都有缓存

区别：

preload优先级高，prefetch优先级低

preload只能加载当前页面所需要使用的资源，prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源

总结：

当前页面优先级高的资源用preload加载

下一页面需要使用的资源用preload加载

怎么用：

1.下载包

npm i --save-dev @vue/preload-webpack-plugin

2.引入

3.配置

core-js

处理ES6及以上API的polyfill

polyfill翻译过来叫垫片/补丁。让我们在不兼容某些新特性的浏览器上，使用该新特性

怎么用

1.下载包

npm i core-js

2.引入

全局引入不需要的因会被引入 体积太大，手动引入太麻烦所以用以下这种方式

在babel中配置

PWA

项目在离线时应用程序能够继续运行功能

怎么用

1.下载包

npm i workbox-webpack-plugin --save-dev

2.配置

在main.js文件配置

在config中配置

在config中配置

总结

从4个角度对webpack和代码进行优化

1.提升开发体验

使用Source Map让开发上线时代码报错能力更加准确的错误提示

2.提升webpack打包构建速度

使用HotModuleReplacement让开发时之重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快

使用Oneof让资源一旦被某个loader处理就不继续遍历了，打包速度更快

使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快

使用Cache对eslint和babel处理的结果进行缓存，第二次打包速度更快

使用Thead多进程处理eslint和babel任务，速度更快。

3.减少代码体积

使用Tree Shaking剔除了没有使用的多于代码，让代码体积更小

使用@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小

使用Image Minimizer对项目中图片进行压缩，体积更小请求速度更快

4.优化代码运行性能

使用Code Split对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快。并通过import动态导入语法进行按需加载，从而达到需要时才加载该资源，不用时不加载资源

使用Preload/Prefetch对代码进行提前加载，等未来需要使用时直接使用，让用户体验更好

使用Network Cache能对输出资源文件进行更好的命名，将来好做缓存

使用core-js 对js进行兼容处理

使用PWA让项目在离线状态下也能访问