1

非常に基本的な webpack 2 ビルドをまとめましたが、プロジェクトのサイズに対して遅いようです。欲しかったのは以下の3点です。

  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