一. 都有哪些策略？
- Scope Hoisting
- Tree-sharking
- 公共资源分离
- 图片压缩
- 动态Polyfill
二. 具体是什么，有哪些细节？
1. 初级分析：使用webpack内置的stats（构建的统计信息）
2. 速度分析：使用spees-measure-webpack-plugin
用法如下：
const SpeedMeasureWebpackPlugin = require(‘speed-measure-webpack-plugin’);
const smp = new SpeedMeasureWebpackPlugin();
const webpackConfig = smp.wrap({
plugins: [
new Myplugin(),
new MyOtherPugin()
]
})
可以看到每个loader和插件执行耗时
为什么要用速度分析插件？
- 为了分析整个打包耗时
- 分析每个插件和loader的耗时情况
3. 体积分析：使用web pack-bundle-analyzer
代码示例：
const BundleAnalyzerPlugin = require(“webpack-bundle-analyzer”)
.BundleAnalyzerPlugin;
module.exports = {
plugins: [new BundleAnalyzerPlugin()()]
};
可以分析哪些问题？
- 依赖的第三方模块文件大小
- 业务里面的组件代码大小
4. 使用更高版本的webapck和node.js
webpack4相比较webpack3构建时间降低了60%-80%；
webpack4做了哪些优化？
- V8带来的优化（for of 替代forEach 、 Map和Set替代 Object,includes替代indexOf）
- 默认使用更快算法的md4 hash算法
- webpack AST可以直接从loader传递给AST，减少解析时间
- 使用字符串方法替代正则表达式。
5. 多进程/多实例构建
- 使用HappyHack解析资源
- 使用 thread-loader解析资源
- 并行压缩
6. 分包
- 设置Externals
- 预编译资源模块
7.缓存
目的：提升二次构建速度
缓存思路：
- babel-loader开启缓存
- Terser-webpack-plugin开启缓存
- cahcher-loader或者hard-source-webpack-plugin
8.缩小构建目标
目的：尽可能的少构建模块
- 比如babel-loader不解析node_modules
module.exports = {
rules: [
test: /\.js$/,
loader: ‘happypack/loader’,
// 不解析node_modules
exclude: ‘node_modules’
]
}
- 减少文件搜索范围
module.exports = {
resolve: {
alias: {
‘react’: path.resolve(__dirname, ‘./node_modules/react/umd/react.production.min.js’),
// 减少模块搜索层级
modules: [path.resolve(__dirname, 'node_modules')],
extensions: ['.js'],
mainFields: ['main']
}
}
9. 使用Tree Shaking擦除无用的js和css
什么是tree shaking？
1个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle里面，tree shaking 就是只把用到的方法打入bundle,没用到的方法在uglify阶段擦除掉。（也就是按需打包使用到的方法）
无用的css如何删除？
- PurifyCss: 遍历代码，识别已经用到的css class
- uincss : html需要通过jsdom加载，所有的样式通过PostCSS解析，通过document.querySelector来识别在html文件里面不存在的选择器
10. 图片压缩
使用imagemin或者tinypng API,通过配置image-webpack-loader即可。
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: “file-loader”,
options: {
name: “[name]_[hash:8].[ext]”
}
},
{
loader: “image-webpack-loader”,
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false
},
pngquant: {
quality: "65-90",
speed: 4
},
gifsicle: {
interlaced: false
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}
imagemin的优点：
- 有很多定制选项
- 可以引入更多的第三方优化插件
- 可以处理多种图片格式
imagemin的压缩原理
- pngquant：是一款PNG压缩器，通过将图像转换为具有alpha通道（通常比24/32位PNG文件小60%-80%） 的更高效的8位PNG格式，可显著减小文件大小。
- Pngcrush: 其主要目的是通过尝试不同的压缩级别和PNG过滤方法来降低PNG IDAT数据流的大小。
- optipng: 其设计灵感来自于pngcrush.optinpng可将图像文件重新压缩为更小尺寸，而不会丢失任何信息。
- tinypng: 将24位PNG文件转换为更小有索引的8位图片，同时所有非必要的metadata也会被剥离
11. 使用动态Polyfill服务：Polyfill Service
Polyfill Service原理：识别不同的user agent，下发不同的Polyfill
如何使用？
- polyfill.io官方提供服务，网址如下：https://polyfill.io/v3/polyfill.min.js
- 基于官方自建polyfill服务：（网址换成自己的网址即可）
三：这一章跟你有什么关系？
这一章是webpack的进阶用法，提出了在拥有基本webpack配置的情况下如何更优秀。是高级前端用的到工程化优化方案。
通过学习这一章，我意识到webapck社区也是真的强，现在场景下的需求基本都有对应的loader和插件可供使用。
前端工程化，webpack值得好好深入学习。
网友评论