CSS extraction and code-splitting

closes #388
This commit is contained in:
Rich Harris
2018-09-02 14:46:27 -04:00
committed by GitHub
parent afba0491ed
commit bebb0dd595
62 changed files with 885 additions and 484 deletions

View File

@@ -3,15 +3,24 @@ import * as path from 'path';
import mkdirp from 'mkdirp';
import rimraf from 'rimraf';
import { EventEmitter } from 'events';
import * as codec from 'sourcemap-codec';
import hash from 'string-hash';
import minify_html from './utils/minify_html';
import { create_compilers, create_main_manifests, create_routes, create_serviceworker_manifest } from '../core';
import { create_compilers, create_main_manifests, create_manifest_data, create_serviceworker_manifest } from '../core';
import * as events from './interfaces';
import { copy_shimport } from './utils/copy_shimport';
import { Dirs, PageComponent } from '../interfaces';
import { CompileResult } from '../core/create_compilers/interfaces';
export function build(opts: {}) {
type Opts = {
legacy: boolean;
bundler: string;
};
export function build(opts: Opts, dirs: Dirs) {
const emitter = new EventEmitter();
execute(emitter, opts).then(
execute(emitter, opts, dirs).then(
() => {
emitter.emit('done', <events.DoneEvent>{}); // TODO do we need to pass back any info?
},
@@ -25,22 +34,14 @@ export function build(opts: {}) {
return emitter;
}
async function execute(emitter: EventEmitter, {
dest = 'build',
app = 'app',
legacy,
bundler,
webpack = 'webpack',
rollup = 'rollup',
routes = 'routes'
} = {}) {
rimraf.sync(path.join(dest, '**/*'));
mkdirp.sync(`${dest}/client`);
copy_shimport(dest);
async function execute(emitter: EventEmitter, opts: Opts, dirs: Dirs) {
rimraf.sync(path.join(dirs.dest, '**/*'));
mkdirp.sync(`${dirs.dest}/client`);
copy_shimport(dirs.dest);
// minify app/template.html
// TODO compile this to a function? could be quicker than str.replace(...).replace(...).replace(...)
const template = fs.readFileSync(`${app}/template.html`, 'utf-8');
const template = fs.readFileSync(`${dirs.app}/template.html`, 'utf-8');
// remove this in a future version
if (template.indexOf('%sapper.base%') === -1) {
@@ -49,14 +50,14 @@ async function execute(emitter: EventEmitter, {
throw error;
}
fs.writeFileSync(`${dest}/template.html`, minify_html(template));
fs.writeFileSync(`${dirs.dest}/template.html`, minify_html(template));
const route_objects = create_routes();
const manifest_data = create_manifest_data();
// create app/manifest/client.js and app/manifest/server.js
create_main_manifests({ bundler, routes: route_objects });
create_main_manifests({ bundler: opts.bundler, manifest_data });
const { client, server, serviceworker } = create_compilers(bundler, { webpack, rollup });
const { client, server, serviceworker } = create_compilers(opts.bundler, dirs);
const client_result = await client.compile();
emitter.emit('build', <events.BuildEvent>{
@@ -65,20 +66,11 @@ async function execute(emitter: EventEmitter, {
result: client_result
});
const build_info: {
bundler: string;
shimport: string;
assets: Record<string, string>;
legacy_assets?: Record<string, string>;
} = {
bundler,
shimport: bundler === 'rollup' && require('shimport/package.json').version,
assets: client_result.assets
};
const build_info = client_result.to_json(manifest_data, dirs);
if (legacy) {
if (opts.legacy) {
process.env.SAPPER_LEGACY_BUILD = 'true';
const { client } = create_compilers(bundler, { webpack, rollup });
const { client } = create_compilers(opts.bundler, dirs);
const client_result = await client.compile();
@@ -92,7 +84,7 @@ async function execute(emitter: EventEmitter, {
delete process.env.SAPPER_LEGACY_BUILD;
}
fs.writeFileSync(path.join(dest, 'build.json'), JSON.stringify(build_info));
fs.writeFileSync(path.join(dirs.dest, 'build.json'), JSON.stringify(build_info));
const server_stats = await server.compile();
emitter.emit('build', <events.BuildEvent>{
@@ -105,8 +97,8 @@ async function execute(emitter: EventEmitter, {
if (serviceworker) {
create_serviceworker_manifest({
routes: route_objects,
client_files: client_result.chunks.map((file: string) => `client/${file}`)
manifest_data,
client_files: client_result.chunks.map(chunk => `client/${chunk.file}`)
});
serviceworker_stats = await serviceworker.compile();