perf: use es6 import for plugins

This commit is contained in:
Pooya Parsa 2017-07-11 03:23:06 +04:30
parent 8ac2f3e6b0
commit 3ef0d15f6b
4 changed files with 49 additions and 49 deletions

1
lib/app/empty.js Normal file
View File

@ -0,0 +1 @@
// This file is intentially left empty for noop aliases

View File

@ -9,40 +9,16 @@ import Nuxt from './components/nuxt.vue'
import App from '<%= appPath %>'
import { getContext } from './utils'
<% if (store) { %>import { createStore } from './store.js'<% } %>
if (process.browser) {
// window.onNuxtReady(() => console.log('Ready')) hook
// Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
window._nuxtReadyCbs = []
window.onNuxtReady = function (cb) {
window._nuxtReadyCbs.push(cb)
}
}
<% if (plugins.filter(p => p.ssr).length) { %>
// Require plugins
<% plugins.filter(p => p.ssr).forEach(plugin => { %>
let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
<%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
<% plugins.forEach(plugin => { %>import <%= plugin.name %> from '<%= plugin.name %>'
<% }) %>
<% } %>
<% if (plugins.filter(p => !p.ssr).length) { %>
// Require browser-only plugins
if (process.browser) {
<% plugins.filter(p => !p.ssr).forEach(plugin => { %>
let <%= plugin.name %> = require('<%= relativeToBuild(plugin.src) %>')
<%= plugin.name %> = <%= plugin.name %>.default || <%= plugin.name %>
<% }) %>
}
<% } %>
// Component: <nuxt-child>
Vue.component(NuxtChild.name, NuxtChild)
// Component: <nuxt-link>
Vue.component(NuxtLink.name, NuxtLink)
// Component: <nuxt>
// Component: <nuxt>`
Vue.component(Nuxt.name, Nuxt)
// vue-meta configuration
@ -132,24 +108,17 @@ async function createApp (ssrContext) {
route: router.currentRoute,
next,
error: app._nuxt.error.bind(app),
<% if(store) { %> store,<% } %>
<% if(store) { %>store,<% } %>
req: ssrContext ? ssrContext.req : undefined,
res: ssrContext ? ssrContext.res : undefined,
}, app)
<% if (plugins.filter(p => p.ssr).length) { %>
<% plugins.filter(p => p.ssr).forEach(plugin => { %>
if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)
<% }) %>
<% } %>
if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)<% }) %>
<% if (plugins.filter(p => !p.ssr).length) { %>
if (process.browser) {
<% plugins.filter(p => !p.ssr).forEach(plugin => { %>
if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)
<% }) %>
}
<% } %>
if (process.browser) { <% plugins.filter(p => !p.ssr).forEach(plugin => { %>
if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(ctx)<% }) %>
}<% } %>
return {
app,
@ -158,4 +127,4 @@ async function createApp (ssrContext) {
}
}
export { createApp, NuxtError }
export { createApp, NuxtError }

View File

@ -2,6 +2,15 @@ import Vue from 'vue'
const noopData = () => ({})
// window.onNuxtReady(() => console.log('Ready')) hook
// Useful for jsdom testing or plugins (https://github.com/tmpvar/jsdom#dealing-with-asynchronous-script-loading)
if (process.browser) {
window._nuxtReadyCbs = []
window.onNuxtReady = function (cb) {
window._nuxtReadyCbs.push(cb)
}
}
export function applyAsyncData (Component, asyncData = {}) {
const ComponentData = Component.options.data || noopData
// Prevent calling this method for each request on SSR context

View File

@ -49,6 +49,14 @@ export default class Builder extends Tapable {
this._buildStatus = STATUS.INITIAL
}
get plugins () {
return this.options.plugins.map((p, i) => {
if (typeof p === 'string') p = { src: p }
p.src = r(this.options.srcDir, p.src)
return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
})
}
async build () {
// Avoid calling build() method multiple times when dev:true
/* istanbul ignore if */
@ -119,6 +127,7 @@ export default class Builder extends Tapable {
'router.js',
'server.js',
'utils.js',
'empty.js',
'components/nuxt-error.vue',
'components/nuxt-loading.vue',
'components/nuxt-child.js',
@ -137,11 +146,7 @@ export default class Builder extends Tapable {
middleware: fs.existsSync(join(this.options.srcDir, 'middleware')),
store: this.options.store,
css: this.options.css,
plugins: this.options.plugins.map((p, i) => {
if (typeof p === 'string') p = { src: p }
p.src = r(this.options.srcDir, p.src)
return { src: p.src, ssr: (p.ssr !== false), name: `plugin${i}` }
}),
plugins: this.plugins,
appPath: './App.vue',
layouts: Object.assign({}, this.options.layouts),
loading: typeof this.options.loading === 'string' ? this.relativeToBuild(this.options.srcDir, this.options.loading) : this.options.loading,
@ -264,16 +269,32 @@ export default class Builder extends Tapable {
async webpackBuild () {
debug('Building files...')
let compilersOptions = []
const compilersOptions = []
// Client
let clientConfig = clientWebpackConfig.call(this)
const clientConfig = clientWebpackConfig.call(this)
compilersOptions.push(clientConfig)
// Server
let serverConfig = serverWebpackConfig.call(this)
const serverConfig = serverWebpackConfig.call(this)
compilersOptions.push(serverConfig)
// Alias plugins to their real path
this.plugins.forEach(p => {
const src = this.relativeToBuild(p.src)
// Client config
if (!clientConfig.resolve.alias[p.name]) {
clientConfig.resolve.alias[p.name] = src
}
// Server config
if (!serverConfig.resolve.alias[p.name]) {
// Alias to noop for ssr:false plugins
serverConfig.resolve.alias[p.name] = p.ssr ? src : './empty.js'
}
})
// Simulate webpack multi compiler interface
// Separate compilers are simpler, safer and faster
this.compiler = { compilers: [] }