Skip to content
This repository has been archived by the owner on May 25, 2020. It is now read-only.

Webpack 3.5 optimization for prod and dev #90

Merged
merged 3 commits into from
Aug 30, 2017
Merged

Conversation

grgur
Copy link
Member

@grgur grgur commented Aug 30, 2017

Build time went from ~15 sec to ~10 sec. Incremental builds in dev are also much faster.

Proposed Changes

  • Single DLL instead of multiple
  • Cheaper DLL sourcemaps
  • Limit loaders to the app folder only
  • Don't follow symlinks in resolvers
  • Thread-loader for babel and sass
  • Cache-loader for sass
  • Faster sourcemap setup
  • Fixed location of extracttextplugin so it's registered just in prod

Checklist

  • Feature developed
  • Comments in code

@grgur grgur requested a review from elas7 August 30, 2017 07:07
Copy link
Contributor

@elas7 elas7 left a comment

Choose a reason for hiding this comment

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

+1

@grgur grgur merged commit 1b94393 into master Aug 30, 2017
@grgur grgur deleted the features/webpack-optim branch August 30, 2017 18:14
elas7 added a commit that referenced this pull request Aug 30, 2017
* lighthouse integration (#60)

* lighthouse integration

* lint and prettier happy

* fix uglify version

* updated packages

* DLL setup (#61)

* [git] #64: add .idea files to .gitignore. (#65)

* Remove script tags to load the DLLs in `index.dev.ejs` (#69)

This is already done by the AddAssetHtml webpack plugin in `webpack.config.js`.

* Add Jest for testing (#68)

Babel doesn't transform ES6 modules because they are supported by webpack. Jest runs in Node,
so we have to add the `transform-es2015-modules-commonjs` plugin to the `test` environment.
Also, we add `dynamic-import-node` to handle `import()`.

Configure jest to mock imports of files and stylesheets by using a file transformer and a proxy for CSS Modules
(As recommended in https://facebook.github.io/jest/docs/tutorial-webpack.html).

Add eslint jest environment to handle it's global variables.

Add `jest` and `jest:watch` commands in `package.json`. Note that watch mode should not be used in CI.

Add smoke tests and generate snapshots for some components.
In the case of connected components, we removed the decorator syntax to allow to test the unconnected component.
(As recommended in http://redux.js.org/docs/recipes/WritingTests.html#connected-components).

Update Readme file.

* Update Readme.md Honorary Mentions

* Update dependencies (#71)

New major versions: Webpack 3, ESLint 4, UglifyJS 3 and Reselect 3.

Update ESLint config to handle deprecations in the new version.

Update code style issues found by new version of Prettier and ESLint.

* Updated Modus contributors

* Add 'coverage' command to package.json (#74)

* Add tests for Redux store (#73)

`redux-mock-store` is used to test async action creators.

Fix return value of `getCategories` selector when there are no categories in the state.

* Create CONTRIBUTING.md

* Create CODE_OF_CONDUCT.md (#75)

* Add updated dependencies to Readme.md (#76)

* Add Codecov code

* Updated snapshot

* Circle should run unit tests

* Coveralls in CI (#78)

Added coveralls support

* coverage and build status (#79)

* Update to React 16 (#80)

* Update to React 16.

Currently using React 16 beta 5.

Note: react-router has peer dependency warnings but it works fine.

Note: "prop-types" was added as a dependency because it was removed from the core package.
This should be removed once transition to Flow is completed.

* Update React version in Readme.md

* Add tests to every component. (#81)

Update Chunk to no longer pass 'load' prop to the loaded component.

Note: Enzyme was added to test behaviour of components, but it isn't currently working in React 16.
Enzyme v3 should fix the issue once it's released.

* happy linter

* Updated readme intro

* Fix console errors in jest test run. (#84)

Add a `requestAnimationFrame` polyfill for Jest, this removes the React 16 warning "React depends on
requestAnimationFrame" when rendering with enzyme in tests. It should be removed once Enzyme adds support
for React 16.

* Parallel cricleci

* Update BalanceItem to return an array from render() (#82)

`BalanceItem` now returns both the balance item and a prefix. This removes the need to render `BalanceItem` next
to `BalancePrefix`. from a parent component.

* Add top level error handler (#83)

`AppError` is rendered at the top level if an uncaught error occurs during rendering, in lifecycle methods,
and in constructors of any component in the whole react tree.

This is recommended to handle errors gracefully in React 16 because now the whole component tree
will be unmounted if an uncaught error happens.

This is implemented as a reusable `ErrorBoundary` component, this way it can be used in a more granular way
to handle errors in different parts of the app while the rest remain interactive.

* Update table style. (#85)

Add `text-overflow: ellipsis;` to table cells.

Align table headers and body columns.

Make table responsive in mobile resolutions.

* PR and Issue templates (#88)

* Automatically deploy from ci (#87)

* Automatically deploy from ci

* circle ci deploy

* firebase-tools instead of firebase

* preload through html

* dont cache sw

* Fix github buttons in production (#89)

* Fix github buttons in production

* update github button tests

* Webpack 3.5 optimization for prod and dev (#90)

* Optimization with threads

* cache loader

* extract text is only in prod
grgur added a commit that referenced this pull request Aug 31, 2017
* Update Flow (#94)

* lighthouse integration (#60)

* lighthouse integration

* lint and prettier happy

* fix uglify version

* updated packages

* DLL setup (#61)

* [git] #64: add .idea files to .gitignore. (#65)

* Remove script tags to load the DLLs in `index.dev.ejs` (#69)

This is already done by the AddAssetHtml webpack plugin in `webpack.config.js`.

* Add Jest for testing (#68)

Babel doesn't transform ES6 modules because they are supported by webpack. Jest runs in Node,
so we have to add the `transform-es2015-modules-commonjs` plugin to the `test` environment.
Also, we add `dynamic-import-node` to handle `import()`.

Configure jest to mock imports of files and stylesheets by using a file transformer and a proxy for CSS Modules
(As recommended in https://facebook.github.io/jest/docs/tutorial-webpack.html).

Add eslint jest environment to handle it's global variables.

Add `jest` and `jest:watch` commands in `package.json`. Note that watch mode should not be used in CI.

Add smoke tests and generate snapshots for some components.
In the case of connected components, we removed the decorator syntax to allow to test the unconnected component.
(As recommended in http://redux.js.org/docs/recipes/WritingTests.html#connected-components).

Update Readme file.

* Update Readme.md Honorary Mentions

* Update dependencies (#71)

New major versions: Webpack 3, ESLint 4, UglifyJS 3 and Reselect 3.

Update ESLint config to handle deprecations in the new version.

Update code style issues found by new version of Prettier and ESLint.

* Updated Modus contributors

* Add 'coverage' command to package.json (#74)

* Add tests for Redux store (#73)

`redux-mock-store` is used to test async action creators.

Fix return value of `getCategories` selector when there are no categories in the state.

* Create CONTRIBUTING.md

* Create CODE_OF_CONDUCT.md (#75)

* Add updated dependencies to Readme.md (#76)

* Add Codecov code

* Updated snapshot

* Circle should run unit tests

* Coveralls in CI (#78)

Added coveralls support

* coverage and build status (#79)

* Update to React 16 (#80)

* Update to React 16.

Currently using React 16 beta 5.

Note: react-router has peer dependency warnings but it works fine.

Note: "prop-types" was added as a dependency because it was removed from the core package.
This should be removed once transition to Flow is completed.

* Update React version in Readme.md

* Add tests to every component. (#81)

Update Chunk to no longer pass 'load' prop to the loaded component.

Note: Enzyme was added to test behaviour of components, but it isn't currently working in React 16.
Enzyme v3 should fix the issue once it's released.

* happy linter

* Updated readme intro

* Fix console errors in jest test run. (#84)

Add a `requestAnimationFrame` polyfill for Jest, this removes the React 16 warning "React depends on
requestAnimationFrame" when rendering with enzyme in tests. It should be removed once Enzyme adds support
for React 16.

* Parallel cricleci

* Update BalanceItem to return an array from render() (#82)

`BalanceItem` now returns both the balance item and a prefix. This removes the need to render `BalanceItem` next
to `BalancePrefix`. from a parent component.

* Add top level error handler (#83)

`AppError` is rendered at the top level if an uncaught error occurs during rendering, in lifecycle methods,
and in constructors of any component in the whole react tree.

This is recommended to handle errors gracefully in React 16 because now the whole component tree
will be unmounted if an uncaught error happens.

This is implemented as a reusable `ErrorBoundary` component, this way it can be used in a more granular way
to handle errors in different parts of the app while the rest remain interactive.

* Update table style. (#85)

Add `text-overflow: ellipsis;` to table cells.

Align table headers and body columns.

Make table responsive in mobile resolutions.

* PR and Issue templates (#88)

* Automatically deploy from ci (#87)

* Automatically deploy from ci

* circle ci deploy

* firebase-tools instead of firebase

* preload through html

* dont cache sw

* Fix github buttons in production (#89)

* Fix github buttons in production

* update github button tests

* Webpack 3.5 optimization for prod and dev (#90)

* Optimization with threads

* cache loader

* extract text is only in prod

* fixed snapshot

* added classnames
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants