1

ビルド システムとして Webpack を使用しており、単一の大きなスタイルシートを複数のチャンクに分割する実験を行っています。

現在、別のエントリ ポイントを作成することでこれを行っていますが、これにより問題が発生します。多くのインポートを複製する必要があること。これにより、断片化されたスパゲッティのような依存関係グラフが発生し、必要な共有コンテキストが失われます。

理想的には、単一のエントリ ポイントに固執し、単一の大きなスタイルシートをコンパイルしてから分割するのがよいでしょう。

たとえば、次の単一のエントリ ポイント main.scss があるとします。

// start:critical.css
@import "shared/normalize";
@import "shared/grid";
@import "shared/layout";
@import "shared/typography";
// end:critical.css

@import "shared/component/tabs";
@import "shared/component/modal";
@import "app/content-list";
@import "app/content";
@import "gallery";

2 つのスタイルシートをコンパイルします。critical.css と main.css

4

1 に答える 1

1

これを解決するために、出力をファイルに書き込む前に分割する単純なプラグインを実装することになりました。

function () {
    const extractor = /\/\*!\s?start:([\w_-]+\.css)\s?\*\/[\S\s]+\/\*!\s?end:\1\s?\*\//g;
    const target = /start:([\w_-]+\.css)/;

    this.plugin('emit', (compilation, callback) => {
        const css = Object.keys(compilation.assets).filter(filename => /\.css$/.test(filename));

        css.forEach(filename => {
            const source = compilation.assets[filename].source();
            const blocks = source.match(extractor);

            blocks && blocks.forEach(block => {
                const name = block.match(target).pop();

                // add a new output file
                compilation.assets[`./public/${name}`] = {
                    source: () => block,
                    size: () => block.length
                };
            });

            // remove blocks from the parent
            compilation.assets[filename].source = () => source.replace(extractor, '');
        });

        callback();
    });
}
于 2016-05-08T10:00:08.930 に答える