摘要：小組最近在二次開發(fā)一個(gè)開源項(xiàng)目，前端主要使用的技術(shù)棧試。所以需要對(duì)作出如下的改動(dòng)。原文件變動(dòng)后至此，我們大部分的優(yōu)化的內(nèi)容已經(jīng)完成，下面是我們打包時(shí)間的一個(gè)對(duì)比。

webpack是當(dāng)下前端界中最著名的一個(gè)模塊加載工具，react和vue也都是用其作為項(xiàng)目的開發(fā)工具之一。小組最近在二次開發(fā)一個(gè)開源項(xiàng)目，前端主要使用的技術(shù)棧試react+redux+es6。構(gòu)建工具則采用的是webpack。起初整個(gè)項(xiàng)目的2707 modules打包花費(fèi)時(shí)長(zhǎng)大概有112s，經(jīng)過(guò)對(duì)一番折騰，使整個(gè)打包編譯時(shí)間降到40s左右。

下面是整個(gè)項(xiàng)目的webpack.config.js文件，可以參考這個(gè)文件進(jìn)行下面的閱讀。

require("babel-register");
require("babel-polyfill");

var webpack = require("webpack");
var webpackPostcssTools = require("webpack-postcss-tools");

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var HtmlWebpackHarddiskPlugin = require("html-webpack-harddisk-plugin");
var UnusedFilesWebpackPlugin = require("unused-files-webpack-plugin").default;
var BannerWebpackPlugin = require("banner-webpack-plugin");
var AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
var HappyPack = require("happypack");
var ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin");

var _ = require("underscore");
var glob = require("glob");
var fs = require("fs");

var chevrotain = require("chevrotain");
var allTokens = require("./frontend/src/metabase/lib/expressions/tokens").allTokens;

function hasArg(arg) {
    var regex = new RegExp("^" + ((arg.length === 2) ? ("-w*"+arg[1]+"w*") : (arg)) + "$");
    return process.argv.filter(regex.test.bind(regex)).length > 0;
}

var SRC_PATH = __dirname + "/frontend/src/metabase";
var BUILD_PATH = __dirname + "/resources/frontend_client";

// default NODE_ENV to development
var NODE_ENV = process.env["NODE_ENV"] || "development";

var IS_WATCHING = hasArg("-w") || hasArg("--watch");
if (IS_WATCHING) {
    process.stderr.write("Warning: in webpack watch mode you must restart webpack if you change any CSS variables or custom media queries
");
}

// Babel:
var BABEL_CONFIG = {
    cacheDirectory: ".babel_cache"
};

// Build mapping of CSS variables
var CSS_SRC = glob.sync(SRC_PATH + "/css/**/*.css");
var CSS_MAPS = { vars: {}, media: {}, selector: {} };
CSS_SRC.map(webpackPostcssTools.makeVarMap).forEach(function(map) {
    for (var name in CSS_MAPS) _.extend(CSS_MAPS[name], map[name]);
});

// CSS Next:
var CSSNEXT_CONFIG = {
    features: {
        // pass in the variables and custom media we scanned for before
        customProperties: { variables: CSS_MAPS.vars },
        customMedia: { extensions: CSS_MAPS.media }
    },
    import: {
        path: ["resources/frontend_client/app/css"]
    },
    compress: false
};

var CSS_CONFIG = {
    localIdentName: NODE_ENV !== "production" ?
        "[name]__[local]___[hash:base64:5]" :
        "[hash:base64:5]",
    restructuring: false,
    compatibility: true,
    url: false, // disabled because we need to use relative url()
    importLoaders: 1
}

// happypack.config
var happyPackConfig = {
    plugins:[
        new HappyPack({
           id: "happyBabel",
           threads: 4,
           cache: true,
           loaders:[
               {
                   path: "babel",
                   query: BABEL_CONFIG
               }
           ]
        }),
        new HappyPack({
            id: "happyEslint",
            threads: 4,
            cache: true,
            loaders: ["eslint"]
        })
    ]
}

var config = module.exports = {
    context: SRC_PATH,
    entry: {
        "app-main": "./app-main.js",
        "app-public": "./app-public.js",
        "app-embed": "./app-embed.js",
        styles: "./css/index.css",
    },

    // output to "dist"
    output: {
        path: BUILD_PATH + "/app/dist",
        filename: "[name].bundle.js?[hash]",
        publicPath: "app/dist/"
    },

    module: {
        loaders: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "HappyPack/loader?id=happyBabel"
            },
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules|.spec.js/,
                loader: "HappyPack/loader?id=happyEslint"
            },
            {
                test: /.(eot|woff2?|ttf|svg|png)$/,
                loader: "file-loader"
            },
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader")
            }
        ]
    },

    resolve: {
        extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".css"],
        alias: {
            "metabase":             SRC_PATH,
            "style":                SRC_PATH + "/css/core/index.css",
            "ace":                  __dirname + "/node_modules/ace-builds/src-min-noconflict",
        }
    },

    plugins: [
        new UnusedFilesWebpackPlugin({
            globOptions: {
                ignore: [
                    "**/types/*.js",
                    "**/*.spec.*",
                    "**/__support__/*.js"
                ]
            }
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./manifest.json"),
            name:"vendors_dll"
        }),
        // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
        // NOTE: the filename on disk won"t include "?[chunkhash]" but the URL in index.html generated by HtmlWebpackPlugin will:
        new ExtractTextPlugin("[name].bundle.css?[contenthash]"),
        new HtmlWebpackPlugin({
            filename: "../../index.html",
            chunks: ["app-main", "styles"],
            template: __dirname + "/resources/frontend_client/index_template.html",
            inject: "head",
            alwaysWriteToDisk: true,
        }),
        new HtmlWebpackPlugin({
            filename: "../../public.html",
            chunks: ["app-public", "styles"],
            template: __dirname + "/resources/frontend_client/index_template.html",
            inject: "head",
            alwaysWriteToDisk: true,
        }),
        new HtmlWebpackPlugin({
            filename: "../../embed.html",
            chunks: ["app-embed", "styles"],
            template: __dirname + "/resources/frontend_client/index_template.html",
            inject: "head",
            alwaysWriteToDisk: true,
        }),
        new AddAssetHtmlPlugin({
            filepath: BUILD_PATH + "/app/dist/*.dll.js",
            includeSourcemap: false
        }),
        new HtmlWebpackHarddiskPlugin({
            outputPath: __dirname + "/resources/frontend_client/app/dist"
        }),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify(NODE_ENV)
            }
        }),
        new BannerWebpackPlugin({
            chunks: {
                "app-main": {
                    beforeContent: "/*
* This file is subject to the terms and conditions defined in
 * file "LICENSE.txt", which is part of this source code package.
 */
",
                },
                "app-public": {
                    beforeContent: "/*
* This file is subject to the terms and conditions defined in
 * file "LICENSE.txt", which is part of this source code package.
 */
",
                },
                "app-embed": {
                    beforeContent: "/*
* This file is subject to the terms and conditions defined in
 * file "LICENSE-EMBEDDING.txt", which is part of this source code package.
 */
",
                },
            }
        }),
    ].concat(happyPackConfig.plugins),

    postcss: function (webpack) {
        return [
            require("postcss-import")(),
            require("postcss-url")(),
            require("postcss-cssnext")(CSSNEXT_CONFIG)
        ]
    }
};

if (NODE_ENV === "hot") {
    // suffixing with ".hot" allows us to run both `yarn run build-hot` and `yarn run test` or `yarn run test-watch` simultaneously
    config.output.filename = "[name].hot.bundle.js?[hash]";

    // point the publicPath (inlined in index.html by HtmlWebpackPlugin) to the hot-reloading server
    config.output.publicPath = "http://localhost:8080/" + config.output.publicPath;

    config.module.loaders.unshift({
        test: /.jsx$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel?"+JSON.stringify(BABEL_CONFIG)]
    });

    // disable ExtractTextPlugin
    config.module.loaders[config.module.loaders.length - 1].loader = "style-loader!css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader"

    config.devServer = {
        hot: true,
        inline: true,
        contentBase: "frontend"
    };

    config.plugins.unshift(
        new webpack.NoErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin()
    );
}

if (NODE_ENV !== "production") {
    // replace minified files with un-minified versions
    for (var name in config.resolve.alias) {
        var minified = config.resolve.alias[name];
        var unminified = minified.replace(/[.-/]min/g, "");
        if (minified !== unminified && fs.existsSync(unminified)) {
            config.resolve.alias[name] = unminified;
        }
    }

    // enable "cheap" source maps in hot or watch mode since re-build speed overhead is < 1 second
    config.devtool = "cheap-module-source-map";
    config.output.devtoolModuleFilenameTemplate = "[absolute-resource-path]";
    config.output.pathinfo = true;
} else {
    config.plugins.push(new ParallelUglifyPlugin({
        uglifyJs:{
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
            mangle: {
                except: allTokens.map(function(currTok) {
                    return chevrotain.tokenName(currTok);
                })
            }
        },
        cacheDir: ".js-cache"
    }))

    config.devtool = "source-map";
}

webpack編譯緩慢一直是現(xiàn)代化前端開發(fā)的一個(gè)痛點(diǎn)。社區(qū)中很多優(yōu)秀的開發(fā)者都貢獻(xiàn)出非常多的插件來(lái)視圖解決這個(gè)問(wèn)題。下面就將本文中用到的插件拋出，在下面這幾個(gè)插件的配合下，編譯速度會(huì)得到顯著的提升。

happypack: 讓loader以多進(jìn)程去處理文件，借助緩存機(jī)制，可以在rebuild的時(shí)候更快

webpack.DllPlugin: 優(yōu)先構(gòu)建npm的第三方包

webpack.DllReferencePlugin: 只負(fù)責(zé)用來(lái)引用由webpack.DllPlugin生成的第三方依賴項(xiàng)

webpack-parallel-uglify-plugin: 并行壓縮javascript文件(生產(chǎn)環(huán)境中使用，可以顯著的提升構(gòu)建速度)

下面就對(duì)這些插件以及我踩下的坑進(jìn)行一個(gè)簡(jiǎn)單的介紹。

https://github.com/amireh/happypack

happypack允許webpack并行編譯多個(gè)文件來(lái)提升構(gòu)建速度。但是在某些情況下，其提升的效果并不是十分明顯，這個(gè)時(shí)候就需要看一下自己電腦的cpu占用率，以及進(jìn)程的運(yùn)行情況。

happypack作為webpack的一個(gè)插件，所以在使用之前應(yīng)該先安裝。

yarn add happywebpack -D

配置過(guò)程很簡(jiǎn)單，只需要在plugins選項(xiàng)中創(chuàng)建其實(shí)例，可以創(chuàng)建一個(gè)或多個(gè)，然后在loader中引用即可。只需要注意一點(diǎn)，當(dāng)創(chuàng)建多個(gè)happypack的實(shí)例的時(shí)候，給每個(gè)實(shí)例傳遞一個(gè)id參數(shù)?；镜淖儎?dòng)如下：

原配置文件

// 省略了部分的配置文件
var config = module.exports = {
    //................
    module: {
        loaders: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel",
                query: BABEL_CONFIG
            },
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules|.spec.js/,
                loader: "eslint"
            },
            {
                test: /.(eot|woff2?|ttf|svg|png)$/,
                loader: "file-loader"
            },
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader")
            }
        ]
    }
    //...............
}

改動(dòng)如下

// happypack.config：更多的配置可以參考文檔，按需索取。
var happyPackConfig = {
    plugins:[
        new HappyPack({
           id: "happyBabel",
           threads: 4,
           cache: true,
           loaders:[
               {
                   path: "babel",
                   query: BABEL_CONFIG
               }
           ]
        }),
        new HappyPack({
            id: "happyEslint",
            threads: 4,
            cache: true,
            loaders: ["eslint"]
        })
    ]
}
var config = module.exports = {
    //................
    module: {
        loaders: [
            // 變動(dòng)這兩個(gè)
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "HappyPack/loader?id=happyBabel"
            },
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules|.spec.js/,
                loader: "HappyPack/loader?id=happyEslint"
            },
            // 其它的并未改動(dòng)
            {
                test: /.(eot|woff2?|ttf|svg|png)$/,
                loader: "file-loader"
            },
            {
                test: /.json$/,
                loader: "json-loader"
            },
            {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?" + JSON.stringify(CSS_CONFIG) + "!postcss-loader")
            }
        ]
    }
    //...............
}
// 在module.loader中引用

然后，當(dāng)我們運(yùn)行：

yarn run build

就會(huì)看到如下輸出：

大概意思就是，happupack的版本是3.1.0，對(duì)babel-loader開啟了四個(gè)線程并從緩存中加載了627個(gè)模塊。

這兩個(gè)插件在使用的時(shí)候，還是有幾個(gè)小坑的，下面就會(huì)為大家講述幾個(gè)。

先說(shuō)一下基本的用法，官方推薦在使用的時(shí)候，我們需要寫兩個(gè)webpack配置文件。其中一個(gè)配置文件主要用于webpack.DllPlugin插件進(jìn)行第三方的預(yù)打包，另一個(gè)則是主webpack配置文件，在其中使用webpack.DllReferencePlugin插件引用第三方生成的依賴模塊。

所以，我們其中一個(gè)配置文件可以命名如下：ddl.config.js

const webpack = require("webpack")
const vendors = Object.keys(require("package.json")["dependencies"])
const SRC_PATH = __dirname + "/frontend/src/metabase"
const BUILD_PATH = __dirname + "/resources/frontend_client"

module.exports = {
  output: {
    path: BUILD_PATH + "/app/dist",
    filename: "[name].dll.js",
    library: "[name]_dll",
  },
  entry: {
    // 第三方依賴設(shè)置為打包的入口
    vendors: vendors,
  },
  plugins: [
    new webpack.DllPlugin({
      path: "manifest.json",
      name: "[name]_dll",
      context: __dirname,
    }),
  ],
}

接下來(lái)，在我們進(jìn)行webpack的正式打包之前可以先來(lái)一個(gè)預(yù)打包，運(yùn)行如下命令：

webpack --config ddl.donfig.js

命令結(jié)束之后，我們可以在BUILD_PATH下面生成了一個(gè)vendors.dll.js(具體的名稱根據(jù)你的配置而來(lái))以及根目錄下面的manifset.json文件。打開這個(gè)文件，可以看到webpack.DllPlugin插件為每個(gè)第三方包都生成了一個(gè)唯一的全局id。

上面的這個(gè)插件的配置有幾個(gè)需要注意的地方，output.library屬性是必須的，同時(shí)webpack.DllPlugin參數(shù)對(duì)象的name屬性和其保持一致。更詳細(xì)的配置可以參考文檔。

預(yù)打包之后，我們需要對(duì)我們的主webpack.config.js文件做如下改動(dòng)。

//..........................
    plugins:[
        // ........
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require("./manifest.json"),
            // 上述生成的文件的名稱
            name:"vendors_dll"
        }),
        //.........
    ]
//..........................

配置很簡(jiǎn)單，詳細(xì)的配置小伙伴可以參考文檔按需索取。這里有幾個(gè)需要注意的地方給大家說(shuō)明一下。

vendors.dll.js文件一定要在引入我們的html文件中，而且在引入模塊文件之前引入，否則你會(huì)看到這個(gè)錯(cuò)誤。

(騷年，有沒有覺得菊花一緊)

但是，有些情況下，我們使用的是html-webpack-plugin來(lái)動(dòng)態(tài)創(chuàng)建我們的html模板，這個(gè)時(shí)候我們?cè)趺窗焉傻?b>vendors.dll.js引入到我們的頁(yè)面中呢？路徑可以寫死，但是你試試，反正我遇到了這個(gè)錯(cuò)誤。如果你的可以，歡迎在github上留言交流。

當(dāng)你遇到這個(gè)錯(cuò)誤，別灰心，接著找解決方法。原來(lái)，還真有，就是下面即將介紹的這個(gè)插件：add-asset-html-webpack-plugin

。這個(gè)插件的主要作用就是將我們自己的靜態(tài)文件插入到模版生成的html文件中。所以需要對(duì)webpack.config.js作出如下的改動(dòng)。

var AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
//..........................
    plugins:[
        // ........
       new AddAssetHtmlPlugin({
            filepath: BUILD_PATH + "/app/dist/*.dll.js",
            includeSourcemap: false
        }),
        //.........
    ]
//..........................

includeSourcemap選項(xiàng)如果不配置的話，可能會(huì)遇到vendors.dll.js.map cannot found的錯(cuò)誤

然后，運(yùn)行，bingo。至此，打包時(shí)間已經(jīng)從100s左右降到了35s左右。恭喜恭喜。

https://github.com/gdborton/webpack-parallel-uglify-plugin

這個(gè)插件的用處十分的強(qiáng)大，并行壓縮javascript，配置也十分簡(jiǎn)單，參考官方文檔就能知道怎么使用，如我們的配置文件就做了如下的變動(dòng)。

原js文件

config.plugins.push(new webpack.optimize.UglifyJsPlugin({
    // suppress uglify warnings in production
    // output from these warnings was causing Heroku builds to fail (#5410)
    compress: {
        warnings: false,
    },
    output: {
        comments: false,
    },
    mangle: {
        // this is required to ensure we don"t minify Chevrotain token identifiers
        // https://github.com/SAP/chevrotain/tree/master/examples/parser/minification
        except: allTokens.map(function(currTok) {
            return chevrotain.tokenName(currTok);
        })
    }
}))

變動(dòng)后

config.plugins.push(new ParallelUglifyPlugin({
        uglifyJs:{
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
            mangle: {
                // this is required to ensure we don"t minify Chevrotain token identifiers
                // https://github.com/SAP/chevrotain/tree/master/examples/parser/minification
                except: allTokens.map(function(currTok) {
                    return chevrotain.tokenName(currTok);
                })
            }
        },
        cacheDir: ".js-cache"
    }))

至此，我們大部分的優(yōu)化的內(nèi)容已經(jīng)完成，下面是我們打包時(shí)間的一個(gè)對(duì)比。
優(yōu)化前打包時(shí)間

優(yōu)化后打包時(shí)間

除了上述的幾個(gè)可以優(yōu)化的地方，還有很多一些小點(diǎn)可以進(jìn)行優(yōu)化，比如：

css-loader在0.15.0之后的版本打包時(shí)間明顯增長(zhǎng)

我們也可以適當(dāng)?shù)目s短一下模塊的查詢路徑等

如果你有好的優(yōu)化點(diǎn)，歡迎在我的github留言交流哈?。?！