| What's the best way to prevent large components from a tree shakeable library from being bundled | |
| together in a common bundle by webpack/next's default strategy? | |
| Thread at https://twitter.com/ebidel/status/1467938411772219393. | |
| # Example | |
| ## Page1.ts | |
| ``` |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Abort promises</title> | |
| </head> | |
| <body> | |
| <button class="download">download</button> | |
| <button class="abort">abort</button> |
| /** | |
| * Copyright 2018 Google Inc. All rights reserved. | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software |
| /** | |
| * Copyright 2018 Google Inc. All rights reserved. | |
| * | |
| * Licensed under the Apache License, Version 2.0 (the "License"); | |
| * you may not use this file except in compliance with the License. | |
| * You may obtain a copy of the License at | |
| * | |
| * http://www.apache.org/licenses/LICENSE-2.0 | |
| * | |
| * Unless required by applicable law or agreed to in writing, software |
| /** | |
| * @author ebidel@ (Eric Bidelman) | |
| * License Apache-2.0 | |
| */ | |
| // Drop this in the DevTools console: | |
| (new ReportingObserver((reports, observer) => { | |
| console.warn('This page is using deprecated APIs or features:'); | |
| const deprecations = reports.map(report => { |
| /** | |
| * @author ebidel@ (Eric Bidelman) | |
| * License Apache-2.0 | |
| */ | |
| const url = require('url'); | |
| const URL = url.URL; | |
| const fetch = require('node-fetch'); | |
| const API_KEY = '<YOUR API KEY>'; |
| /** | |
| * @author ebidel@ (Eric Bidelman) | |
| * License Apache-2.0 | |
| */ | |
| /** | |
| * Finds all elements on the page, inclusive of those within shadow roots. | |
| * @param {string=} selector Simple selector to filter the elements by. e.g. 'a', 'div.main' | |
| * @return {!Array<string>} List of anchor hrefs. | |
| */ |
| <!-- based on https://twitter.com/ebidel/status/933496242272747520 --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title><responsive-element></title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> |