一. 都有哪些策略？

1. Scope Hoisting
2. Tree-sharking
3. 公共資源分離
4. 圖片壓縮
5. 動態(tài)Polyfill

二. 具體是什么，有哪些細節(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í)行耗時
為什么要用速度分析插件？

1. 為了分析整個打包耗時
2. 分析每個插件和loader的耗時情況

3. 體積分析：使用web pack-bundle-analyzer

代碼示例：

const BundleAnalyzerPlugin = require(“webpack-bundle-analyzer”)
  .BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()()]
};

可以分析哪些問題？

1. 依賴的第三方模塊文件大小
2. 業(yè)務(wù)里面的組件代碼大小

4. 使用更高版本的webapck和node.js

webpack4相比較webpack3構(gòu)建時間降低了60%-80%；

webpack4做了哪些優(yōu)化？

1. V8帶來的優(yōu)化（for of 替代forEach 、 Map和Set替代 Object,includes替代indexOf）
2. 默認使用更快算法的md4 hash算法
3. webpack AST可以直接從loader傳遞給AST，減少解析時間
4. 使用字符串方法替代正則表達式。

5. 多進程/多實例構(gòu)建

1. 使用HappyHack解析資源
2. 使用 thread-loader解析資源
3. 并行壓縮

6. 分包

1. 設(shè)置Externals
2. 預(yù)編譯資源模塊

7.緩存

目的：提升二次構(gòu)建速度
緩存思路：

1. babel-loader開啟緩存
2. Terser-webpack-plugin開啟緩存
3. cahcher-loader或者hard-source-webpack-plugin

8.縮小構(gòu)建目標

目的：盡可能的少構(gòu)建模塊

1. 比如babel-loader不解析node_modules

module.exports = {
    rules: [
        test: /\.js$/,
        loader: ‘happypack/loader’,
        // 不解析node_modules
        exclude: ‘node_modules’
    ]
}

2. 減少文件搜索范圍

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如何刪除？

1. PurifyCss: 遍歷代碼，識別已經(jīng)用到的css class
2. 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)點：

1. 有很多定制選項
2. 可以引入更多的第三方優(yōu)化插件
3. 可以處理多種圖片格式

imagemin的壓縮原理

1. pngquant：是一款PNG壓縮器，通過將圖像轉(zhuǎn)換為具有alpha通道（通常比24/32位PNG文件小60%-80%） 的更高效的8位PNG格式，可顯著減小文件大小。
2. Pngcrush: 其主要目的是通過嘗試不同的壓縮級別和PNG過濾方法來降低PNG IDAT數(shù)據(jù)流的大小。
3. optipng: 其設(shè)計靈感來自于pngcrush.optinpng可將圖像文件重新壓縮為更小尺寸，而不會丟失任何信息。
4. tinypng: 將24位PNG文件轉(zhuǎn)換為更小有索引的8位圖片，同時所有非必要的metadata也會被剝離

11. 使用動態(tài)Polyfill服務(wù)：Polyfill Service

Polyfill Service原理：識別不同的user agent，下發(fā)不同的Polyfill

如何使用？

1. polyfill.io官方提供服務(wù)，網(wǎng)址如下：https://polyfill.io/v3/polyfill.min.js
2. 基于官方自建polyfill服務(wù)：（網(wǎng)址換成自己的網(wǎng)址即可）

三：這一章跟你有什么關(guān)系？

這一章是webpack的進階用法，提出了在擁有基本webpack配置的情況下如何更優(yōu)秀。是高級前端用的到工程化優(yōu)化方案。
通過學習這一章，我意識到webapck社區(qū)也是真的強，現(xiàn)在場景下的需求基本都有對應(yīng)的loader和插件可供使用。
前端工程化，webpack值得好好深入學習。