Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundle all the modules inside the app #414

Merged
merged 4 commits into from
Dec 17, 2016
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Remove the use of CDN and bundle everything inside the app.
We still pre-build the prefetcher because it needs
different webpack config which only targets browsers
supports Service Workers.
  • Loading branch information
arunoda committed Dec 17, 2016
commit 08f7f1043a159fa2562ba42101cb56af8ce58752
2 changes: 0 additions & 2 deletions client/next-dev.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import 'react-hot-loader/patch'
import * as next from './next'
import { requireModule } from '../lib/eval-script'

window.next = next
module.exports = requireModule
4 changes: 1 addition & 3 deletions client/next.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import domready from 'domready'
import { rehydrate } from '../lib/css'
import Router from '../lib/router'
import App from '../lib/app'
import evalScript, { requireModule } from '../lib/eval-script'
import evalScript from '../lib/eval-script'

const {
__NEXT_DATA__: {
Expand Down Expand Up @@ -41,5 +41,3 @@ domready(() => {
if (ids) rehydrate(ids)
render(createElement(App, appProps), container)
})

module.exports = requireModule
62 changes: 1 addition & 61 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,69 +71,9 @@ gulp.task('copy-bench-fixtures', () => {
})

gulp.task('build', [
'build-dev-client',
'build-client',
'build-prefetcher'
])

gulp.task('build-dev-client', ['compile-lib', 'compile-client'], () => {
return gulp
.src('dist/client/next-dev.js')
.pipe(webpack({
quiet: true,
output: { filename: 'next-dev.bundle.js', libraryTarget: 'var', library: 'require' },
module: {
loaders: [
{
test: /eval-script\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
'babel-plugin-transform-remove-strict-mode'
]
}
}
]
}
}))
.pipe(gulp.dest('dist/client'))
.pipe(notify('Built dev client'))
})

gulp.task('build-client', ['compile-lib', 'compile-client'], () => {
return gulp
.src('dist/client/next.js')
.pipe(webpack({
quiet: true,
output: { filename: 'next.bundle.js', libraryTarget: 'var', library: 'require' },
plugins: [
new webpack.webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.webpack.optimize.UglifyJsPlugin()
],
module: {
loaders: [
{
test: /eval-script\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: [
'babel-plugin-transform-remove-strict-mode'
]
}
}
]
}
}))
.pipe(gulp.dest('dist/client'))
.pipe(notify('Built release client'))
})

gulp.task('build-prefetcher', ['compile-lib', 'compile-client'], () => {
return gulp
.src('client/next-prefetcher.js')
Expand Down Expand Up @@ -172,7 +112,7 @@ gulp.task('build-prefetcher', ['compile-lib', 'compile-client'], () => {
.pipe(notify('Built release prefetcher'))
})

gulp.task('test', () => {
gulp.task('test', ['compile'], () => {
return gulp.src('./test')
.pipe(jest.default({
coverage: true,
Expand Down
30 changes: 1 addition & 29 deletions lib/eval-script.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,3 @@
import React from 'react'
import ReactDOM from 'react-dom'
import App from '../lib/app'
import Link from '../lib/link'
import * as Prefetch from '../lib/prefetch'
import * as Css from '../lib/css'
import Head from '../lib/head'

const modules = new Map([
['react', React],
['react-dom', ReactDOM],
['next/app', App],
['next/link', Link],
['next/prefetch', Prefetch],
['next/css', Css],
['next/head', Head]
])

function require (moduleName) {
const name = moduleName
const m = modules.get(name)

if (m) return m

throw new Error(`Module "${moduleName}" is not exists in the bundle`)
}

export const requireModule = require

/**
* IMPORTANT: This module is compiled *without* `use strict`
* so that when we `eval` a dependency below, we don't enforce
Expand All @@ -41,6 +12,7 @@ export const requireModule = require

export default function evalScript (script) {
const module = { exports: {} }

eval(script) // eslint-disable-line no-eval
return module.exports
}
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
"react": "15.4.1",
"react-dom": "15.4.1",
"react-hot-loader": "3.0.0-beta.6",
"read-pkg-up": "2.0.0",
"send": "0.14.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove babel-plugin-transform-remove-strict-mode too

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

"source-map-support": "0.4.6",
"strip-ansi": "3.0.1",
Expand Down
22 changes: 5 additions & 17 deletions server/build/webpack.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ export default async function createCompiler (dir, { dev = false } = {}) {
ignore: 'pages/_document.js'
})

const entry = {}
const entry = {
'main.js': dev ? require.resolve('../../client/next-dev') : require.resolve('../../client/next')
}

const defaultEntries = dev
? [join(__dirname, '..', '..', 'client/webpack-hot-middleware-client')] : []
for (const p of pages) {
Expand Down Expand Up @@ -145,6 +148,7 @@ export default async function createCompiler (dir, { dev = false } = {}) {
alias: {
'babel-runtime': babelRuntimePath,
react: require.resolve('react'),
'react-dom': require.resolve('react-dom'),
'next/link': require.resolve('../../lib/link'),
'next/prefetch': require.resolve('../../lib/prefetch'),
'next/css': require.resolve('../../lib/css'),
Expand Down Expand Up @@ -179,22 +183,6 @@ export default async function createCompiler (dir, { dev = false } = {}) {
return `webpack:///${resourcePath}?${id}`
}
},
externals: [
'react',
'react-dom',
{
[require.resolve('react')]: 'react',
[require.resolve('../../lib/link')]: 'next/link',
[require.resolve('../../lib/prefetch')]: 'next/prefetch',
[require.resolve('../../lib/css')]: 'next/css',
[require.resolve('../../lib/head')]: 'next/head',
// React addons ask for React like this.
// That causes webpack to push react into the app's bundle.
// This fix simply prevents that and ask to use React from the next-bundle
'./React': 'react',
'./ReactDOM': 'react-dom'
}
],
resolve: {
root: [
nodeModulesDir,
Expand Down
36 changes: 1 addition & 35 deletions server/document.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import React, { Component, PropTypes } from 'react'
import htmlescape from 'htmlescape'
import { renderStatic } from 'glamor/server'
import readPkgUp from 'read-pkg-up'

const { pkg } = readPkgUp.sync({
cwd: __dirname,
normalize: false
})

export default class Document extends Component {
static getInitialProps ({ renderPage }) {
Expand Down Expand Up @@ -82,37 +76,9 @@ export class NextScript extends Component {
}

render () {
const { staticMarkup, dev, cdn } = this.context._documentProps
return <div>
{staticMarkup ? null : createClientScript({ dev, cdn })}
<script type='text/javascript' src='/_next/commons.js' />
<script type='text/javascript' src='/_next/main.js' />
</div>
}
}

function createClientScript ({ dev, cdn }) {
if (dev) {
return <script type='text/javascript' src='/_next/next-dev.bundle.js' />
}

if (!cdn) {
return <script type='text/javascript' src='/_next/next.bundle.js' />
}

return <script dangerouslySetInnerHTML={{ __html: `
(function () {
load('https://cdn.zeit.co/next.js/${pkg.version}/next.min.js', function (err) {
if (err) load('/_next/next.bundle.js')
})
function load (src, fn) {
fn = fn || function () {}
var script = document.createElement('script')
script.src = src
script.onload = function () { fn(null) }
script.onerror = fn
script.crossorigin = 'anonymous'
document.body.appendChild(script)
}
})()
`}} />
}
5 changes: 5 additions & 0 deletions server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ export default class Server {
await this.serveStatic(req, res, p)
})

this.router.get('/_next/main.js', async (req, res, params) => {
const p = join(this.dir, '.next/main.js')
await this.serveStatic(req, res, p)
})

this.router.get('/_next/commons.js', async (req, res, params) => {
const p = join(this.dir, '.next/commons.js')
await this.serveStatic(req, res, p)
Expand Down
2 changes: 1 addition & 1 deletion test/integration.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
'use strict'

import { join } from 'path'
import next from '../server/next'
import next from '../dist/server/next'

const dir = join(__dirname, 'fixtures', 'basic')
const app = next({
Expand Down