初級分析：使用webpack內置的stats

stats:構建統計資訊

package.json中使用stats

"scripts": {
    "build:stats":"webpack --env production --json > stats.json"
}
復制代碼

指定輸出的json物件，輸出一個json檔案

Node.js 中使用

const webpack = require('webpack')
const config = require('./webpack.config.js')('production')

webacpk(config, (err, stats) => {
    if(err) {
        return console.error(err);
    }
    
    if(stats.hasErrors()) {
        return console.log(stats.toString("errors-only"))
    }
    
    console.log(stats);
     
})
復制代碼

缺點：顆粒度太粗，看不出問題所在，

速度分析：使用speed-measure-webpack-plugin

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')

const smp = new SpeedMesurePlugin();

const webpackConfig = smp.wrap({
    plugins: [
        new MyPlugin();
        new MyOtherplugin()
    ]
})
復制代碼

速度分析插件作用

• 分析整個打包總耗時
• 每個插件和loader的耗時情況

體積分析：使用webpack-bundle-analyzer分析體積

const {BundleAnalyzerPlugin} =require('webpack-bundle-analyzer')

module.exports = {
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}
復制代碼

構建完成后會在8888埠展開大小

可以分析哪些問題?

• 依賴的第三方模塊檔案大小
• 業務里面的組件代碼大小

多行程多實體構建

使用thread-loader決議資源

原理：每次webpack決議一個模塊，thread-loader會將他及它的依賴分配給worker執行緒中

use:[
{
    loader:'thread-loader',
    options: {
        workers: 3
    }
}]
復制代碼

多行程實體并行壓縮

• 方法一：使用parallel-uglify-plugin插件

const ParalleUglifyPlugin = require('parallel-uglify-plugin')

module.exports = {
    plugins: [
        new ParalleUglifyPlugin({
            uglifyJs:{
                output: {
                    beautify:false,
                    comments:false,
                },
                compress:{
                    warnings: false,
                    drop_console:true,
                    collapse_vars:true,
                    reduce_vars:true
                }
            }
            
        })
    ]
}
復制代碼

• 方法二：uglifyjs-webpack-plugin開啟parallel引數

plugins: [
    new UglifyJsPlugin({
        uglifyOptions:{},
        parallel:true
    })
]
復制代碼

• 方法三(推薦)：terser-webpack-plugin開啟parallel引數

module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                parrallel:4
            })
        ]
    }
}
復制代碼

進一步分包：預編譯資源模塊

思路：將react, react-dom, redux, react-redux基礎包和業務基礎打包成一個檔案，

方法：創建一個單獨的組態檔,一般命名為webpack.dll.js,使用DLLPlugin進行分包，DllReferencePlugin對manifest.json參考，

const path = require('path')
const webpack = requrie('webpack')

module.exports = {
    context: process.cwd(),
    resolve:{
        extensions:['js', 'jsx', '.json', '.less', '.css'],
        modules:[__dirname, 'node_modules']
    },
    entry: {
        library: [
        'react',
        'react-dom',
        'redux',
        'react-redux']
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, './build/library'),
        library: '[name]'
    },
    plugins: [
        new webpack.Dllplygin({
            name: '[name]',
            path: './build/library/[name].json'
        })
    ]
}
復制代碼

在webpack.config.js引入

module.exports = {
    plugins: [
        new webpack.DllReferencePlugin({
            mainfest:require('./build/library/mainfest.json')
            
        })
    ]  
}
復制代碼

充分利用快取提升二次構建速度

快取思路：

• babel-loader開啟快取
• terser-webpack-plugin開啟快取
• 使用cache-loader或者hard-source-webpack-plugin

縮小構建目標

目的：盡可能的少構建模塊

比如babel-laoder不決議node_modules

module.exports = {
    rules: {
        test: /\\.js$/,
        loader: 'babel-loader',
        exclude: 'node_modules'
    }
}
復制代碼

減少檔案搜索范圍

• 優化resolve.modules配置(減少模塊搜索層級)
• 優化resolve.mainFields配置
• 優化resolve.extensions配置
• 合理使用alias

module.exports = {
    resolve: {
        alias: {
            react: path.resolve(__dirname, './node_modules/react/dist/react.min.js')
        },
        modules: [path.resolve(__dirname, 'node_modules')],
        extensions: ['js'],
        mainFilelds:['main'],
    }
}
復制代碼

使用webpack進行圖片壓縮

要求： 基于Node庫的imagemin或者tinypngAPI

使用： 配置image-webpack-loader

return {
    test: /\\.(png|svg|jpg|gif)$/,
    use: [{
        loader:'file-loader'
        options:{
            name:  `${filename}img/[name]${hash}.[ext]`
        }
    },{
        loader:'image-webpack-loader',
        options: {
            mojpeg: {
                progressive: true,
                quality: 65
            },
            optipng: {
                enabled: false,
            } ，
            pngquant: {
                quality: '65-90',
                speed: 4
            }
        }
        
    }]
}
復制代碼

imagemin的優點點分析

• 有很多定制選項
• 可以引入更多第三方優化插件，例如pngquant
• 可以處理多種圖片格式

使用TreeShaking擦除無用的CSS

無用的CSS如何洗掉掉？

• PurifyCSS：遍歷代碼，識別已經用到的CSS class
• uncss:HTML需要通過jsdom加載， 所有的樣式通過PostCSS決議，通過document.querySelector來識別在html檔案里面不存在的選擇器，

在webpack中如何使用PurifyCSS？

• 使用purgecss-webpack-webpack-plugin(www.npmjs.com/package/pur…)
• 和mini-css-extract-plugin配合使用

使用動態Polyfill服務

• babel-polyfill(React16官方推薦)
• polyfill-service(社區維護)

Polyfill Service原理

識別User Agent,下發不同的Polyfill

體積優化策略總結

• Scope Hoisting
  • scope hoisting 后會把需要匯入的檔案直接移入匯入者頂部，這就是所謂的 hoisting，需要添加 ModuleConcatenationPlugin（模塊關聯）插件
• Tree-shaking
• 公共資源分離
• 圖片壓縮
• 動態Polyfill

原文鏈接： https://juejin.cn/post/6844904136622751758