Jhernandez has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/379813 )
Change subject: Chore: Automatically generate the vendor bundle
......................................................................
Chore: Automatically generate the vendor bundle
Instead of having to manually specify the vendor bundle which is prone
to mistakes and to get outdated, automatically generate the vendor
bundle with the files included from node_modules/ without including the
styles for now.
It may be interesting to add support for a vendor.css at some point if
we use any big library.
Other changes include moving the use of 'preact/debug' to the code
itself, and relying on dead code elimination to be removed in the
production version.
Change-Id: I0d66d69efdd60fd911cf1ed4bdf35d30019cd064
---
M src/client/index.tsx
M webpack.config.ts
2 files changed, 22 insertions(+), 16 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/13/379813/1
diff --git a/src/client/index.tsx b/src/client/index.tsx
index 554a266..f455a46 100644
--- a/src/client/index.tsx
+++ b/src/client/index.tsx
@@ -6,6 +6,13 @@
import { WithContext } from "../common/components/with-context";
import { routes } from "../common/routers/api";
+// Include preact/debug only in development for React DevTools integration.
+// This check needs to be as defined with DefinePlugin in the webpack config so
+// that Uglify can remove this if statement in production.
+if (process.env.NODE_ENV !== "production") {
+ require("preact/debug");
+}
+
const history = newHistory();
const router = newRouter(routes);
const pageRoot = document.getElementById("root");
diff --git a/webpack.config.ts b/webpack.config.ts
index b276ec5..711c164 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -35,8 +35,6 @@
warnings: true
};
-const PREACT = PRODUCTION ? "preact" : "preact/debug";
-
const configuration: webpack.Configuration = {
// Bundled outputs and their source inputs. For each entry, the source input
// and any dependencies are compiled together into one chunk file output
@@ -53,23 +51,13 @@
// `src/client/index` has no correspondence to which page a browser visits.
// e.g., `/`, `/wiki/Foobar`, and `/about` all use the client so that
// subsequent pages can be loaded dynamically inline.
- index: "./src/client",
+ index: "./src/client"
// (runtime): reserved for the Webpack runtime chunk. This chunk performs
// module resolution, dynamic importing, and more for all other code during
// execution. Without a distinct runtime chunk, it's instead bundled into
// each entry which breaks caching. This chunk changes whenever any code
// anywhere changes.
-
- // Client package dependencies (these should be a subset of package.json's
- // `dependencies`). This chunk changes when one of the specified
- // dependencies changes.
- vendor: [
- "history/createBrowserHistory",
- "isomorphic-unfetch",
- "path-to-regexp",
- PREACT
- ]
},
stats: STATS,
@@ -201,6 +189,10 @@
configuration.plugins = [
new webpack.IgnorePlugin(/domino/),
+ // Embed values of process.env.NODE_ENV and other variables in the code.
+ // This allows to embed information in the source itself at build time, and
it
+ // is used for example to have uglify remove code at minification time,
+ // getting rid of development only code (for exmaple, like preact/debug)
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify(PRODUCTION ? "production" : "development")
@@ -224,13 +216,20 @@
// them to a separate chunk improves the cacheability of a significant
portion
// of the client. This chunk changes whenever external dependencies change.
new webpack.optimize.CommonsChunkPlugin({
- // This name should match `configuration.entry.vendor`.
name: "vendor",
// Do not include common code identified from other entries. Only include
- // what was explicitly specified in the vendor entry to keep the result
+ // what was explicitly required from node_modules to keep the result
// strictly limited to external package dependencies.
- minChunks: Infinity
+ //
https://webpack.js.org/plugins/commons-chunk-plugin/#passing-the-minchunks-property-a-function
+ minChunks(module) {
+ // This prevents stylesheet resources with the .css extension from being
+ // moved from their original chunk to the vendor chunk
+ if (module.resource && /^.*\.(css)$/.test(module.resource)) {
+ return false;
+ }
+ return module.context && module.context.indexOf("node_modules") !== -1;
+ }
}),
// When using code splitting, move common chunks of child chunks into the
--
To view, visit https://gerrit.wikimedia.org/r/379813
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0d66d69efdd60fd911cf1ed4bdf35d30019cd064
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
