Webpack打包效率優化篇

Webpack基礎配置：

語法解析：babel-loader

樣式解析：style-loader

css解析：css-loader

less解析：less-loader

檔案解析：url-loader（file-loalder）

效能分析：webpack-bundle-analyzer

程式碼：

var path = require('path');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    mode: "development",
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, './build/'),
        filename: "source.js",
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000 * 100
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",  // creates style nodes from JS strings
                    'css-loader',    // translates CSS into CommonJS
                    'less-loader',     // compiles Less to CSS
                ]
            },
        ]
    },
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}

打包結果：

 

效能圖：

構建時間：8.506s

這裡分析打包結果問題有哪些：

1.樣式檔案沒有剝離出來

2.node_modules被打進來了

3.第三方打包體積過大react,react-dom

4.檔案大小沒處理，沒有經過壓縮

好了針對以上幾個問題，我們重新配置webpack

1.剝離node_modules

rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',// 與 MiniCssExtractPlugin.loader 衝突 
                    'css-loader'
                ],
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader",  // creates style nodes from JS strings
                    'css-loader',    // translates CSS into CommonJS
                    'less-loader',     // compiles Less to CSS
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000 * 100
                        }
                    }
                ],
                exclude: /node_modules/
            }
        ]

構建結果：

構建時間由8.506s變成1.251s

2.剝離js與css，less檔案

webpack4.X版本已經使用最新API mini-css-extract-plugin ，原來的extract-text-webpack-plugin在node版本為10.X以後已經失效了。

引入plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

配置loader

{
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader',// 與 MiniCssExtractPlugin.loader 衝突 
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader",  // creates style nodes from JS strings
                    'css-loader',    // translates CSS into CommonJS
                    'less-loader',     // compiles Less to CSS
                ]
            },

配置plugin

/**
         *  剝離CSS檔案
         */
        new MiniCssExtractPlugin({
            filename: "[name].[chunkhash:8].css",
            chunkFilename: "[id].css"
        }),
        /** 
         *  動態引入css，less，js等檔案
         */
        new HtmlWebpackPlugin({
            title: 'webpack',
            template: './index.html'
        }),

重新build

 

構建時間有1.251s變成1.391s這裡剝離檔案導致構建時間增加，但是我們可以看到生成的目標js體積由987K變成了886K

3.分離第三方類庫 DllPlugin 和 DllReferencePlugin

首先建立webpack.dll.config.js

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

module.exports = {
    entry: {
        react: [
            'react',
            'react-dom'
        ]
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve('distDll/dll'),
        library: '[name]_dll_[hash]'
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]_dll_[hash]',
            path: path.join(__dirname, 'distDll/dll', '[name].manifest.json')
        })
    ]
}

在webpack.dev.js中增加

/**
         * 動態引入manifest.json
         */
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./distDll/dll/react.manifest.json')
        }),

構建結果

構建時間1.391s變成1.008s 目標體積由886K變成了9.92K

4.利用快取加速二次構建

/**
         * 快取加速二次構建速度
         */
        new HardSourceWebpackPlugin({
            cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
            configHash: function (webpackConfig) {
                // node-object-hash on npm can be used to build this.
                return require('node-object-hash')({ sort: false }).hash(webpackConfig);
            },
            environmentHash: {
                root: process.cwd(),
                directories: [],
                files: ['package-lock.json', 'yarn.lock'],
            },
            info: {
                // 'none' or 'test'.
                mode: 'none',
                // 'debug', 'log', 'info', 'warn', or 'error'.
                level: 'debug',
            },
            cachePrune: {
                maxAge: 2 * 24 * 60 * 60 * 1000,
                sizeThreshold: 50 * 1024 * 1024
            },
        }),

構建結果：

可以看到有寫入快取的過程。這裡程式碼體積過小，沒看到加速效果，如果實際專案中，可以看到時間的縮小的效果

 5.利用scope histing （變數提升） 減少程式碼閉包形成

這裡我使用了兩個測試檔案，a.js與b.js 其中b.js中引入了a.js

    /**
         * 開啟 Scope Hoisting
         */
        new webpack.optimize.ModuleConcatenationPlugin(),

配置前的效果：

可以清晰的看到打包之後的程式碼分別對a.js與b.js生成了兩個閉包函式（閉包函式的副作用這裡就不多說了，佔記憶體）

build出的檔案大小9.92K

配置後的效果：

 可以看到效果已經沒有了針對兩個兩個js的閉包程式碼塊

我們可以看到目標檔案大小由9.92K變成了8.98K

6.Tree shaking 刪除沒用的函式或者變數

在.babelrc檔案中設定modules:false,其實webpack4中已經預設實現了tree shaking。

  /*
      tree shaking.
    */
    ["env", {
      "modules": false
    }],

我們在程式碼中加入一個無效函式

var treeShaking = function () {
    console.log('tree shaking.');
    return;
    function unused() {
        return 'unused';
    };
}

treeShaking();

這裡需要修改build模式更改為生產環境（production）而不是開發環境（development）

效果：

可以看到已經消除了unused函式。

7.壓縮圖片檔案大小

   {
                test: /\.(png|jpg|gif|svg|jpeg)$/,
                use: [
                    'url-loader',
                    {
                        loader: 'image-webpack-loader',
                        // options: {
                        //     limit: 1000 * 100    //不加限制圖片過大會直接打到build下 導致找不到圖片檔案
                        // }
                        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
                            }
                        }
                    }
                ],
                exclude: /node_modules/
            }

壓縮後的效果：

由壓縮前的79.6K變成了72.5K

最終build出的效果圖

可以看到已經壓縮到了很小。

以上關於webpack的優化先總結到這裡，後續繼續更新。

github地址：https://github.com/Dqhan/Webpack