Webpack 供应商编译速度慢

Question

我正在使用 webpack 生成我的包和供应商。

我的问题是，自从我将供应商添加到我的编译中后，我的编译时间从 2 秒变成了 20 秒 （在慢速机器上，您可以等待40 秒）。

我注意到 sourceMap 一直生成，但是当我为生产编译时，它没有优化生成 sourceMap 然后使用 Uglify 插件删除它们。我想我在某处漏掉了重点！

我已经尝试过 #eval，但重量增加了 4 倍，而且编译速度也不快（甚至更慢）。

所以我在寻找圣杯： * 一种为所有编译禁用 sourceMap 的方法 * 一种仅针对供应商禁用 sourceMap 的方法（用于开发） * 一个缓存系统，只重新编译更改过的文件（比如使用 --watch）

我的工作流程是在本地机器上使用开发环境（所以我使用 --watch），然后使用 Jenkins 将其推送到我的开发服务器，编译一切。在服务器上使用 watch 不是一个选项（我保持 webpack 是最新的，如果我更改供应商列表，我必须重新启动 --watch））

一个选项可能是从我的 webpack 配置中删除供应商，但那将是我最后一次尝试。

我的webpack.config.js:

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

var jsPath = path.join(__dirname, './src/js/src/');
var vendorPath = path.join(__dirname, './src/js/src/vendors/');

// Detect environnement from package.json or command line
var prod = process.argv.indexOf("--prod") > -1;
var dev = process.argv.indexOf("--dev") > -1;

module.exports = {
    entry: {
        app: jsPath + 'init.js',
        vendor: [
            vendorPath + 'jquery.js',
            vendorPath + 'bootstrap.js',
            vendorPath + 'nunjucks.js',
            vendorPath + 'jquery.pickmeup.js',
            vendorPath + 'select2.js',
            vendorPath + 'select2_ext.js'
        ]
    },
    // Key for ProvidePlugin
    resolve: {
        alias: {
            jquery: vendorPath + 'jquery.js'
        }
    },
    output: {
        path: path.join(__dirname, './src/js/build/'),
        filename: 'bundle.js',
        publicPath: ''
    },
    devtool: prod ? "" : "#inline-source-map",
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: {compact: false}}
        ]
    },
    plugins: [
        // Expose $ as global variable
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        // Concat vendors files
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js",
            minChunks: Infinity
        }),
        // Set __DEBUG__ global variable
        new webpack.DefinePlugin({
            __DEBUG__: dev
        })
    ]
    // In 'production', Uglify all JS chunked files
        .concat(prod ?
            [
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false
                    },
                    sourceMap: false,
                    mangle: {
                        except: ['$', 'exports', 'require']
                    }
                })
            ]
            : []
        )
};

Answer 1

您可以直接使用 SourceMapDevToolPlugin 而不是 devtool 以排除某些块生成源地图。例如，如果您想排除 vendor 和 polyfills 捆绑包：

config.plugins.push(new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  exclude: ['vendor.js', 'polyfills.js']
}));

Webpack 供应商编译速度慢

Webpack slow on vendors compilation

webpack

source-maps