1

我已经整理了一个非常基本的 webpack 2 构建，但是对于项目大小来说似乎很慢。我想要的三件事是：

  1. 分块（js & scss）
  2. SCSS 编译
  3. 摇树

Webpack 似乎是能够做这些事情的一个不错的选择。我一直在使用 Gulp 和 Rollup，但是树抖动旁边的 SCSS/Chunking 是一件好事。

编译构建大约需要 4000 - 5000 毫秒，这不会是世界末日，除非项目是如此之小，所以我担心随着项目的增长会变得更大。

我尝试了一些方法来提高速度。

resolve : {
    root: path.resolve(__dirname,'src')
}

这确实有帮助，将时间减少了几百毫秒，这很棒。我试图通过解析别名来进一步解决这个问题，但据我所知，这并没有真正显示出任何收益。

我也将 devTool 设置为 eval 。除此之外，我还没有真正能够改进事情，但我确信这是我设置的方式。值得注意的是，虽然 'webpack' 会编译构建，但运行 webpack-dev-server 不会。它启动，挂起编译然后崩溃。这可能是也可能不是一个单独的问题，但我认为值得包括在内。

我还使用 ES6 System.import 进行分块（仅作为注释）。

我把项目放在了 git 上，所以随意把它拉下来：https ://github.com/loriensleafs/trying-out-webpack2

webpack.config.js 是：

var path              = require('path'),
    webpack           = require('webpack'),
    CleanPlugin       = require('clean-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    production        = process.env.NODE_ENV === 'production';

var plugins = [
    new ExtractTextPlugin({ filename: 'bundle.css', allChunks: true}),
    new webpack.optimize.CommonsChunkPlugin({
        name      : 'vendor',
        children  : true,
        minChunks : 2
    })
];

if (production) {
    plugins = plugins.concat([
        new CleanPlugin('builds'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.MinChunkSizePlugin({
            minChunkSize: 51200, // ~50kb
        }),
        new webpack.optimize.UglifyJsPlugin({
            mangle:   true,
            compress: {
                warnings: false, // Suppress uglification warnings
            },
        }),

        new webpack.DefinePlugin({
            __SERVER__      : !production,
            __DEVELOPMENT__ : !production,
            __DEVTOOLS__    : !production,
            'process.env':   {
                BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
            }
        })
    ]);
}
module.exports = {
    // debug   : !production,
    devTool : production ? false : 'eval',
    entry   : './src',
    output  : {
        path          : 'builds',
        filename      : 'bundle.js',
        chunkFilename : 'chunk.js',
        publicPath    : 'builds/'
    },
    resolve : {
        root: path.resolve(__dirname,'src')
    },
    plugins : plugins,
    module  : {
        loaders: [
            {
                test   :   /\.(png|gif|jpe?g|svg)$/i,
                loader : 'url',
                query  : {
                    limit: 10000
                }
            },
            {
                test    : /\.js$/,
                include : /src/,
                exclude : /node_modules/,
                loader  : 'babel'
            },
            {
                test    : /\.scss$/,
                include : /src/,
                exclude : /node_modules/,
                loader  : ExtractTextPlugin.extract(['css','sass'])
            },
            {
                test   :  /\.html$/,
                loader : 'html'
            }
        ]
    }
};

感谢人们对此的任何建议/帮助。如果我可以在这里发布任何其他有用的信息，请告诉我。

4

0 回答 0