Question

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

Chunking（js＆amp; scss）
SCSS编译
Tree Shaking

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'
            }
        ]
    }
};

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

Slow Small Webpack 2 Build - Tree Shaking - Sass - Chunking

0 个答案: