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.

Sign up for GitHub

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

Jump to bottom

feat: generate the analyze bundle for vite #3096

Merged
merged 2 commits into from
Aug 31, 2023
Merged

feat: generate the analyze bundle for vite #3096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d21ad04
feat: generate the analyze bundle for vite
anxolin Aug 31, 2023
77123a7
chore: add command analyze-bundle to root package.json
alfetopito Aug 31, 2023
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,4 @@ yalc.lock
# vercel
.vercel

analyse.html
22 changes: 16 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,16 @@ yarn
yarn start
```

### build

```bash
yarn build

# Analyze CoW Swap bundle
# Use one of the following templates: "sunburst" | "treemap" | "network" | "raw-data" | "list";
ANALYZE_BUNDLE=true ANALYZE_BUNDLE_TEMPLATE=sunburst yarn build
```

### Unit testing

```bash
Expand Down Expand Up @@ -115,12 +125,12 @@ CoW Swap tries to find the best price available on-chain using some price feeds.

All price feeds are enabled by default, but they can be individually disabled by using an environment variable:

| Name | Environment variable | Type | Description |
| ---------------- | ---------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| **CoW Protocol** | `REACT_APP_PRICE_FEED_GP_ENABLED` | `boolean` (default = `true`) | [CoW Protocol](https://docs.cow.fi/) price estimation. Used for all price estimation. |
| **Paraswap** | `REACT_APP_PRICE_FEED_PARASWAP_ENABLED` | `boolean` (default = `true`) | [Paraswap](https://paraswap.io/) price estimation. Used for all price estimations. |
| **1inch** | `REACT_APP_PRICE_FEED_1INCH_ENABLED` | `boolean` (default = `true`) | [Paraswap](https://1inch.exchange) price estimation. Used for all price estimations. |
| **0x** | `REACT_APP_PRICE_FEED_0X_ENABLED` | `boolean` (default = `true`) | [0x](https://0x.org/) price estimation. Used for all price estimation. |
| Name | Environment variable | Type | Description |
| ---------------- | --------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------- |
| **CoW Protocol** | `REACT_APP_PRICE_FEED_GP_ENABLED` | `boolean` (default = `true`) | [CoW Protocol](https://docs.cow.fi/) price estimation. Used for all price estimation. |
| **Paraswap** | `REACT_APP_PRICE_FEED_PARASWAP_ENABLED` | `boolean` (default = `true`) | [Paraswap](https://paraswap.io/) price estimation. Used for all price estimations. |
| **1inch** | `REACT_APP_PRICE_FEED_1INCH_ENABLED` | `boolean` (default = `true`) | [Paraswap](https://1inch.exchange) price estimation. Used for all price estimations. |
| **0x** | `REACT_APP_PRICE_FEED_0X_ENABLED` | `boolean` (default = `true`) | [0x](https://0x.org/) price estimation. Used for all price estimation. |

### Metadata attached to orders (AppData)

Expand Down
101 changes: 61 additions & 40 deletions apps/cowswap-frontend/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { lingui } from '@lingui/vite-plugin'
import { sentryVitePlugin } from '@sentry/vite-plugin'
import react from '@vitejs/plugin-react-swc'
import stdLibBrowser from 'node-stdlib-browser'
import { defineConfig, loadEnv, searchForWorkspaceRoot, splitVendorChunkPlugin } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'
import { PluginOption, defineConfig, loadEnv, searchForWorkspaceRoot, splitVendorChunkPlugin } from 'vite'
import macrosPlugin from 'vite-plugin-babel-macros'
import { ModuleNameWithoutNodePrefix, nodePolyfills } from 'vite-plugin-node-polyfills'
import { VitePWA } from 'vite-plugin-pwa'
Expand All @@ -12,11 +13,17 @@ import viteTsConfigPaths from 'vite-tsconfig-paths'

import * as path from 'path'

// eslint-disable-next-line no-restricted-imports
import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types'

const allNodeDeps = Object.keys(stdLibBrowser).map((key) => key.replace('node:', '')) as ModuleNameWithoutNodePrefix[]

// Trezor getAccountsAsync() requires crypto and stream (the module is lazy-loaded)
const nodeDepsToInclude = ['crypto', 'stream']

const analyzeBundle = process.env.ANALYZE_BUNDLE === 'true'
const analyzeBundleTemplate: TemplateType = (process.env.ANALYZE_BUNDLE_TEMPLATE as TemplateType) || 'treemap' // "sunburst" | "treemap" | "network" | "raw-data" | "list";

export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), ['REACT_APP_'])

Expand All @@ -28,6 +35,58 @@ export default defineConfig(({ mode }) => {
}
}, {})

const plugins = [
nodePolyfills({
exclude: allNodeDeps.filter((dep) => !nodeDepsToInclude.includes(dep)),
globals: {
Buffer: true,
global: true,
process: true,
},
protocolImports: true,
}),
splitVendorChunkPlugin(),
react({
plugins: [['@lingui/swc-plugin', {}]],
}),
viteTsConfigPaths({
root: '../../',
}),
macrosPlugin(),
lingui({
cwd: 'apps/cowswap-frontend',
}),
svgr(),
VitePWA({
injectRegister: null,
strategies: 'injectManifest',
srcDir: 'src',
filename: 'service-worker.ts',
minify: true,
injectManifest: {
globPatterns: ['**/*.{js,css,html,png,jpg,svg,json,woff,woff2,md}'],
},
}),
sentryVitePlugin({
authToken: process.env.REACT_APP_SENTRY_AUTH_TOKEN,
org: 'cowprotocol',
project: 'cowswap',
telemetry: false,
}),
]

if (analyzeBundle) {
plugins.push(
visualizer({
template: analyzeBundleTemplate,
open: true,
gzipSize: true,
brotliSize: true,
filename: 'analyse.html', // will be saved in project's root
}) as PluginOption
)
}

return {
define: {
...envWithProcessPrefix,
Expand Down Expand Up @@ -89,45 +148,7 @@ export default defineConfig(({ mode }) => {
},
},

plugins: [
nodePolyfills({
exclude: allNodeDeps.filter((dep) => !nodeDepsToInclude.includes(dep)),
globals: {
Buffer: true,
global: true,
process: true,
},
protocolImports: true,
}),
splitVendorChunkPlugin(),
react({
plugins: [['@lingui/swc-plugin', {}]],
}),
viteTsConfigPaths({
root: '../../',
}),
macrosPlugin(),
lingui({
cwd: 'apps/cowswap-frontend',
}),
svgr(),
VitePWA({
injectRegister: null,
strategies: 'injectManifest',
srcDir: 'src',
filename: 'service-worker.ts',
minify: true,
injectManifest: {
globPatterns: ['**/*.{js,css,html,png,jpg,svg,json,woff,woff2,md}'],
},
}),
sentryVitePlugin({
authToken: process.env.REACT_APP_SENTRY_AUTH_TOKEN,
org: 'cowprotocol',
project: 'cowswap',
telemetry: false,
}),
],
plugins,

// Uncomment this if you are using workers.
// worker: {
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"prebuild": "nx run cowswap-frontend:i18n",
"postbuild": "rm -rf build && mkdir build && mv dist/apps/cowswap-frontend/* build",
"prepare": "husky install",
"postinstall": "yarn run patch-package"
"postinstall": "yarn run patch-package",
"analyze-build": "cross-env ANALYZE_BUNDLE=true ANALYZE_BUNDLE_TEMPLATE=sunburst yarn build"
Copy link
Collaborator

Choose a reason for hiding this comment

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

I added a command to make it easier to run it

},
"browser": {
"crypto": false
Expand Down Expand Up @@ -240,6 +241,7 @@
"prettier": "^2.6.2",
"react-cosmos": "^6.0.0-beta.6",
"react-cosmos-plugin-vite": "^6.0.0-beta.6",
"rollup-plugin-visualizer": "^5.9.2",
"ts-jest": "^29.1.1",
"ts-mockito": "^2.6.1",
"ts-node": "^10.9.1",
Expand Down
14 changes: 12 additions & 2 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20429,6 +20429,16 @@ rollup-plugin-terser@^7.0.0:
serialize-javascript "^4.0.0"
terser "^5.0.0"

rollup-plugin-visualizer@^5.9.2:
version "5.9.2"
resolved "https://registry.yarnpkg.com/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.2.tgz#f1aa2d9b1be8ebd6869223c742324897464d8891"
integrity sha512-waHktD5mlWrYFrhOLbti4YgQCn1uR24nYsNuXxg7LkPH8KdTXVWR9DNY1WU0QqokyMixVXJS4J04HNrVTMP01A==
dependencies:
open "^8.4.0"
picomatch "^2.3.1"
source-map "^0.7.4"
yargs "^17.5.1"

rollup@^2.43.1:
version "2.79.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
Expand Down Expand Up @@ -21046,7 +21056,7 @@ source-map@^0.5.7:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==

source-map@^0.7.3:
source-map@^0.7.3, source-map@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
Expand Down Expand Up @@ -24239,7 +24249,7 @@ yargs@^16.2.0:
y18n "^5.0.5"
yargs-parser "^20.2.2"

yargs@^17.0.0, yargs@^17.3.1, yargs@^17.6.2, yargs@^17.7.2:
yargs@^17.0.0, yargs@^17.3.1, yargs@^17.5.1, yargs@^17.6.2, yargs@^17.7.2:
version "17.7.2"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
Expand Down
Loading