Evan You
8 years ago
7 changed files with 198 additions and 31 deletions
@ -0,0 +1,66 @@ |
|||
const hash = require('hash-sum') |
|||
import { isJS } from './util' |
|||
|
|||
export default class VueSSRClientPlugin { |
|||
constructor (options = {}) { |
|||
this.options = Object.assign({ |
|||
filename: 'vue-ssr-client-manifest.json' |
|||
}, options) |
|||
} |
|||
|
|||
apply (compiler) { |
|||
compiler.plugin('emit', (compilation, cb) => { |
|||
const stats = compilation.getStats().toJson() |
|||
|
|||
const allFiles = stats.assets |
|||
.map(a => a.name) |
|||
|
|||
const initialScripts = Object.keys(stats.entrypoints) |
|||
.map(name => stats.entrypoints[name].assets) |
|||
.reduce((assets, all) => all.concat(assets), []) |
|||
.filter(isJS) |
|||
|
|||
const asyncScripts = allFiles |
|||
.filter(isJS) |
|||
.filter(file => initialScripts.indexOf(file) < 0) |
|||
|
|||
const manifest = { |
|||
publicPath: stats.publicPath, |
|||
all: allFiles, |
|||
initial: initialScripts, |
|||
async: asyncScripts, |
|||
modules: { /* [identifier: string]: Array<index: number> */ } |
|||
} |
|||
|
|||
const assetModules = stats.modules.filter(m => m.assets.length) |
|||
const fileToIndex = file => manifest.all.indexOf(file) |
|||
stats.modules.forEach(m => { |
|||
// ignore modules duplicated in multiple chunks
|
|||
if (m.chunks.length === 1) { |
|||
const cid = m.chunks[0] |
|||
const chunk = stats.chunks.find(c => c.id === cid) |
|||
const files = manifest.modules[hash(m.identifier)] = chunk.files.map(fileToIndex) |
|||
// find all asset modules associated with the same chunk
|
|||
assetModules.forEach(m => { |
|||
if (m.chunks.some(id => id === cid)) { |
|||
files.push.apply(files, m.assets.map(fileToIndex)) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
// const debug = (file, obj) => {
|
|||
// require('fs').writeFileSync(__dirname + '/' + file, JSON.stringify(obj, null, 2))
|
|||
// }
|
|||
// debug('stats.json', stats)
|
|||
// debug('client-manifest.json', manifest)
|
|||
|
|||
const json = JSON.stringify(manifest, null, 2) |
|||
compilation.assets[this.options.filename] = { |
|||
source: () => json, |
|||
size: () => json.length |
|||
} |
|||
cb() |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
import { validate, isJS } from './util' |
|||
|
|||
export default class VueSSRServerPlugin { |
|||
constructor (options = {}) { |
|||
this.options = Object.assign({ |
|||
filename: 'vue-ssr-server-bundle.json' |
|||
}, options) |
|||
} |
|||
|
|||
apply (compiler) { |
|||
validate(compiler) |
|||
|
|||
compiler.plugin('emit', (compilation, cb) => { |
|||
const stats = compilation.getStats().toJson() |
|||
const entryName = Object.keys(stats.entrypoints)[0] |
|||
const entryAssets = stats.entrypoints[entryName].assets.filter(isJS) |
|||
|
|||
if (entryAssets.length > 1) { |
|||
throw new Error( |
|||
`Server-side bundle should have one single entry file. ` + |
|||
`Avoid using CommonsChunkPlugin in the server config.` |
|||
) |
|||
} |
|||
|
|||
const entry = entryAssets[0] |
|||
if (!entry || typeof entry !== 'string') { |
|||
throw new Error( |
|||
`Entry "${entryName}" not found. Did you specify the correct entry option?` |
|||
) |
|||
} |
|||
|
|||
const bundle = { |
|||
entry, |
|||
files: {}, |
|||
maps: {} |
|||
} |
|||
|
|||
stats.assets.forEach(asset => { |
|||
if (asset.name.match(/\.js$/)) { |
|||
bundle.files[asset.name] = compilation.assets[asset.name].source() |
|||
} else if (asset.name.match(/\.map$/)) { |
|||
bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source()) |
|||
} |
|||
// do not emit anything else for server
|
|||
delete compilation.assets[asset.name] |
|||
}) |
|||
|
|||
const json = JSON.stringify(bundle, null, 2) |
|||
const filename = this.options.filename |
|||
|
|||
compilation.assets[filename] = { |
|||
source: () => json, |
|||
size: () => json.length |
|||
} |
|||
|
|||
cb() |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
const { red, yellow, gray } = require('chalk') |
|||
|
|||
const prefix = `[vue-server-renderer-webpack-plugin]` |
|||
const warn = exports.warn = msg => console.error(red(`${prefix} ${msg}\n`)) |
|||
const tip = exports.tip = msg => console.log(yellow(`${prefix} ${msg}\n`)) |
|||
|
|||
export const validate = compiler => { |
|||
if (compiler.options.target !== 'node') { |
|||
warn('webpack config `target` should be "node".') |
|||
} |
|||
|
|||
if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') { |
|||
warn('webpack config `output.libraryTarget` should be "commonjs2".') |
|||
} |
|||
|
|||
if (!compiler.options.externals) { |
|||
tip( |
|||
'It is recommended to externalize dependencies for better ssr performance.\n' + |
|||
`See ${gray('https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#externals')} ` + |
|||
'for more details.' |
|||
) |
|||
} |
|||
} |
|||
|
|||
export const isJS = file => /\.js($|\?)/.test(file) |
|||
Loading…
Reference in new issue