aynish/grasp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

configure webpack to split vendor libraries in a separate chunk

Browse source 
also generally makes it somewhat cleaner import-wise
This commit is contained in:
Dima Gerasimov 2022-12-30 01:47:26 +00:00 committed by karlicoss
parent 91400126ae
commit 5ec8bcb822
8 changed files with 52 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extension/.flowconfig
View file

@ -2,10 +2,10 @@
.*/node_modules/.* .*/node_modules/.*
[include] [include]
src/
[libs] [libs]
node_modules/flow-interfaces-chrome/interfaces/ node_modules/flow-interfaces-chrome/interfaces/
src/js/browser_types.js
[lints] [lints]

8
extension/src/js/browser_types.js → extension/flow-typed/webextension-polyfill.js vendored
View file

@ -91,3 +91,11 @@ declare var browser: {
tabs: browser$tabs, tabs: browser$tabs,
scripting: browser$scripting, scripting: browser$scripting,
} }
declare module "webextension-polyfill" {
declare var storage: browser$storage;
declare var permissions: browser$permissions;
declare var tabs: browser$tabs;
declare var scripting: browser$scripting;
}

24
extension/src/js/background.js
View file

@ -1,5 +1,4 @@
/* @flow */ /* @flow */
// TODO do I really need to annotate all files with @flow??
// hmm this works if you declare type: module in manifest // hmm this works if you declare type: module in manifest
@ -7,16 +6,19 @@
// I assume this is only processed with webpack // I assume this is only processed with webpack
// import * as browser from "./browser-polyfill" // import * as browser from "./browser-polyfill"
const manifestVersion = chrome.runtime.getManifest().manifest_version // this works with v3 if you need to
if (manifestVersion == 3) { // const manifestVersion = chrome.runtime.getManifest().manifest_version
// for v3 it's provided via manifest // if (manifestVersion == 3) {
try { // // for v3 it's provided via manifest
/* eslint-disable no-undef */ // try {
importScripts('./browser-polyfill.js') // /* eslint-disable no-undef */
} catch (e) { // importScripts('./browser-polyfill.js')
console.error(e) // } catch (e) {
} // console.error(e)
} // }
// }
import * as browser from "webextension-polyfill"
import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common' import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'

2
extension/src/js/options.js
View file

@ -1,4 +1,6 @@
/* @flow */ /* @flow */
import browser from "webextension-polyfill"
export type Options = { export type Options = {
endpoint: string; endpoint: string;

2
extension/src/js/permissions.js
View file

@ -1,4 +1,6 @@
/* @flow */ /* @flow */
import browser from "webextension-polyfill"
function urlForPermissionsCheck(url: string): string { function urlForPermissionsCheck(url: string): string {
var u = new URL(url); var u = new URL(url);

2
extension/src/options.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="text/javascript" src="browser-polyfill.js"/></script> <script type="text/javascript" src="webextension-polyfill.js"></script>
<script type="text/javascript" src="options_page.js"/></script> <script type="text/javascript" src="options_page.js"/></script>
<style> <style>
input:invalid { input:invalid {

2
extension/src/popup.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="text/javascript" src="browser-polyfill.js"></script> <script type="text/javascript" src="webextension-polyfill.js"></script>
<script type="text/javascript" src="popup.js"></script> <script type="text/javascript" src="popup.js"></script>
</head> </head>
<body> <body>

27
extension/webpack.config.js
View file

@ -118,9 +118,10 @@ const manifestExtra = {
manifest_version: v3 ? 3 : 2, manifest_version: v3 ? 3 : 2,
background: (v3 ? { background: (v3 ? {
service_worker: 'background.js', service_worker: 'background.js',
type: 'module',
} : { } : {
scripts: [ scripts: [
'browser-polyfill.js', 'webextension-polyfill.js',
'background.js', 'background.js',
], ],
persistent: false, persistent: false,
@ -165,7 +166,28 @@ const options = {
optimization: { optimization: {
// https://webpack.js.org/configuration/optimization // https://webpack.js.org/configuration/optimization
// don't think minimize worth it for such a tiny extension // don't think minimize worth it for such a tiny extension
minimize: false minimize: false,
// split chunks is so vendors split out into separate js files
// to prevent bloating individual source files
// seems that at the moment we need to manually load the chunks in the corresponding
// html files or manifest
// split chunks doc recommend using webpack html plugin??
splitChunks: {
// seems necessary, otherwise doesn't split out polyfill??
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return packageName
},
// create chunk regardless size etc
enforce: true,
},
},
},
}, },
module: { module: {
rules: [ rules: [
@ -194,7 +216,6 @@ const options = {
patterns: [ patterns: [
{ context: 'src', from: '**/*.html' }, { context: 'src', from: '**/*.html' },
{ context: 'src', from: '**/*.png' }, { context: 'src', from: '**/*.png' },
{ from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js'},
] ]
}), }),
new WebpackExtensionManifestPlugin({ new WebpackExtensionManifestPlugin({