一. 都有哪些策略身隐？
- Scope Hoisting
- Tree-sharking
- 公共資源分離
- 圖片壓縮
- 動態(tài)Polyfill
二. 具體是什么席揽，有哪些細(xì)節(jié)对途？
1. 初級分析：使用webpack內(nèi)置的stats（構(gòu)建的統(tǒng)計信息）
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和插件執(zhí)行耗時
為什么要用速度分析插件替裆？
- 為了分析整個打包耗時
- 分析每個插件和loader的耗時情況
3. 體積分析：使用web pack-bundle-analyzer
代碼示例：
const BundleAnalyzerPlugin = require(“webpack-bundle-analyzer”)
.BundleAnalyzerPlugin;
module.exports = {
plugins: [new BundleAnalyzerPlugin()()]
};
可以分析哪些問題雌隅？
- 依賴的第三方模塊文件大小
- 業(yè)務(wù)里面的組件代碼大小
4. 使用更高版本的webapck和node.js
webpack4相比較webpack3構(gòu)建時間降低了60%-80%；
webpack4做了哪些優(yōu)化臼婆？
- V8帶來的優(yōu)化（for of 替代forEach 抒痒、 Map和Set替代 Object,includes替代indexOf）
- 默認(rèn)使用更快算法的md4 hash算法
- webpack AST可以直接從loader傳遞給AST，減少解析時間
- 使用字符串方法替代正則表達(dá)式颁褂。
5. 多進(jìn)程/多實例構(gòu)建
- 使用HappyHack解析資源
- 使用 thread-loader解析資源
- 并行壓縮
6. 分包
- 設(shè)置Externals
- 預(yù)編譯資源模塊
7.緩存
目的：提升二次構(gòu)建速度
緩存思路：
- babel-loader開啟緩存
- Terser-webpack-plugin開啟緩存
- cahcher-loader或者h(yuǎn)ard-source-webpack-plugin
8.縮小構(gòu)建目標(biāo)
目的：盡可能的少構(gòu)建模塊
- 比如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: 遍歷代碼樟蠕，識別已經(jīng)用到的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的優(yōu)點(diǎn)：
- 有很多定制選項
- 可以引入更多的第三方優(yōu)化插件
- 可以處理多種圖片格式
imagemin的壓縮原理
- pngquant：是一款PNG壓縮器，通過將圖像轉(zhuǎn)換為具有alpha通道（通常比24/32位PNG文件小60%-80%） 的更高效的8位PNG格式病往，可顯著減小文件大小捣染。
- Pngcrush: 其主要目的是通過嘗試不同的壓縮級別和PNG過濾方法來降低PNG IDAT數(shù)據(jù)流的大小。
- optipng: 其設(shè)計靈感來自于pngcrush.optinpng可將圖像文件重新壓縮為更小尺寸停巷，而不會丟失任何信息耍攘。
- tinypng: 將24位PNG文件轉(zhuǎn)換為更小有索引的8位圖片榕栏，同時所有非必要的metadata也會被剝離
11. 使用動態(tài)Polyfill服務(wù)：Polyfill Service
Polyfill Service原理：識別不同的user agent，下發(fā)不同的Polyfill
如何使用蕾各？
- polyfill.io官方提供服務(wù)扒磁，網(wǎng)址如下：https://polyfill.io/v3/polyfill.min.js
- 基于官方自建polyfill服務(wù)：（網(wǎng)址換成自己的網(wǎng)址即可）
三：這一章跟你有什么關(guān)系？
這一章是webpack的進(jìn)階用法式曲，提出了在擁有基本webpack配置的情況下如何更優(yōu)秀荡短。是高級前端用的到工程化優(yōu)化方案来吩。
通過學(xué)習(xí)這一章圈纺，我意識到webapck社區(qū)也是真的強(qiáng)了讨，現(xiàn)在場景下的需求基本都有對應(yīng)的loader和插件可供使用。
前端工程化钧排，webpack值得好好深入學(xué)習(xí)敦腔。
