Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

Update fusion-cli to latest webpack (v5). Webpack v5 release includes major changes to how the application is bundled, improving on long-term http caching, bundle size, as well as enabling capabilities to speed-up build performance with Persisted Caching. You can find more about the Webpack v5 release [here](https://webpack.js.org/blog/2020-10-10-webpack-5-release/), and [here](https://github.com/webpack/changelog-v5#general-direction).

Here're some major changes that may affect the build output, although this PR aims to make the upgrade backward-compatible by extending default configuration:
- [Environment requirements](https://webpack.js.org/migrate/5/#preparations)
  Node.js >=10.13 is required
- Memory allocation in large applications
  Node.js process running webpack build may require additional memory for larger applications. It can be mitigated by increasing the V8's memory limit, e.g. `NODE_OPTIONS='--max-old-space-size=X' fusion build --production`
- [JSON Modules](https://github.com/webpack/changelog-v5#json-modules)
  Webpack v5 deprecated named exports when importing modules containing JSON. This will produce a warning during the build. This required `strictModuleExports` rule to be disabled, which was previously used to fail build whenever some module tried to import a non-existent export from another module. Expectations is that developers will take good care of the produced warnings.
- [Improved tree-shaking](https://github.com/webpack/changelog-v5#major-changes-optimization)
  Nested-module tree-shaking; inner-module tree-shaking; CommonJS tree-shaking; [General tree-shaking improvements](https://github.com/webpack/changelog-v5#general-tree-shaking-improvements)

  _Note: Often CommonJS modules contain side-effects, which does not play nice with other Fusion.js configuration options. It is crucial to ensure that such modules and packages are not mistakenly declared to be side-effects free via `sideEffects` field in package.json, or by using defaults like `assumeNoImportSideEffects`, `defaultNoImportSideEffects` in Fusion.js._
- [Module resolution](https://github.com/webpack/changelog-v5#resolving)
   There’ve been a number of changes to how modules are resolved. This was done as part of Webpack’s effort to be more spec-compliant, and to reach better interoperability.
   - Webpack v5 requires fully-specified paths in strict ESM, which was relaxed in Fusion.js in order to give apps and libraries more time to adapt to this change (i.e. the import from path should include the file extension, so that platform/tool does not need to guess it)
   - Added support for imports / exports fields in package.json
   - PnP support out-of-the-box

  _Note: In some cases it changes what module code gets picked up by resolution algorithm, which may need to be assessed on a case-by-case basis to ensure the application is still functioning properly._
- [Improved long-term http caching](https://github.com/webpack/changelog-v5#deterministic-chunk-module-ids-and-export-names)
   Deterministic module and chunk ids (except for modules that hold references to i18n keys, which is handled by Fusion.js)
- [Named chunk IDs in development mode](https://github.com/webpack/changelog-v5#major-changes-development-support)
   Human-readable chunk id is generated based on the file path in development mode
- [Persisted Caching](https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md)
  - Enabled by default in Fusion.js
  - Can be controlled via `disableBuildCache` CLI option, e.g. `fusion build --production --disableBuildCache`, or by applying some dynamic logic in .fusionrc.js file, e.g. disable build cache depending on environment (CI vs. local machine):
    ```js
    module.exports = {
        // ...
        // Disable build cache in CI based on env variables,
        // or any other custom logic can be implemented here
        disableBuildCache: (process.env.CI === ‘true’)
    };
    ```
  - Fusion.js now stores all build cache in a single folder (under `./.fusion/.build-cache/`, vs. `./node_modules/.cache/` and `./node_modules/.fusion_babel-cache/`), this should make it easier to integrate with CIs, as it only requires to persist a single folder.

   _Note: Fusion.js will remove the contents of the whole./.fusion/ directory when disableBuildCache option is off, including the build cache._

  [There's a webpack guide](https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md) to persistent caching that should help shed more light on some of the implementation details and potential risks.

  _Note: the persistent caching needs to be isolated per project, i.e. you can not reuse the same cache to build a different project / application, frankly it also needs to be segmented by dev / production builds which is already handled by configuration in Fusion.js._
- Run validation and optimization on svg assets
- Skip unnecessary compression of the server bundle
- Disabled caching of static assets in development mode
- Reduced stats output to only generate sufficient information for popular bundle analyzers. This helps reduce time spent on generating excessive information, as well as to reduce memory allocations and stats file size
- Avoid unnecessary module parsing with chunk ids loader
- Respect the `sideEffects` field in package.json when `assumeNoImportSideEffects` is enabled
- Extend `assumeNoImportSideEffects` option to take a list of package names to exclude from the optimization. This allows developers have more control over which modules get patched with `sideEffects: false`
60e0406

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time

FUSION.JS

Modern framework for fast, powerful React apps

Build status fusion-core Downloads

What is it?

fu·sionnoun

The process or result of joining two or more things together to form a single entity.

Fusion.js, Uber’s open source universal web framework, represents the fusion of the client and the server. It's geared for server-side rendering out of the box, and its plugin-driven architecture allows for complex frontend and backend logic to be encapsulated in a single plugin:

import App from 'fusion-react';
import Router from 'fusion-plugin-react-router';

export default () => {
  const app = new App(<div>...</div>);

  /*
  One line of code sets up everything you need for routing:
  - Server rendering
  - React Providers on both server and browser
  - Bundle splitting integration
  - Hot module reloading support
  */
  app.register(Router);

  return app;
}

We initially built Fusion.js to make our own websites easier to maintain, but were so impressed with the benefits that we decided to offer it to the community as an open source project!

Try it out

If you're interested in giving Fusion.js a shot, Overview and Core Concepts are great places to start.

Contributing

This is a monorepo of all open source Fusion.js packages maintained using jazelle. Take a look at CONTRIBUTING.md for info on how to develop in this repo.

License

MIT