I refactored my app a bit to see if I could get the code splitting or dyanamic import working. I did get it to load, with some caveats, but I’m not sure it’s actually splitting anything, and I’m not sure how to check. Is there a tool to generate a graph of some kind?)
The caveats:
- I had to disable
audit-argument-checksas whatever methods are sending out the code modules has arguments which are not being checked using the check method (according toaudit-argument-checks).
Exception while invoking method '__dynamicImport' Error: Did not check() all arguments during call to '__dynamicImport'
- I had to disable
browser-policy, as the code is being delivered for dynamically imported modules is executing inside anevaland “unsafe-inline” is disallowed bybrowser-policyby default.
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".
Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".
- I can’t get the
awaitmethod of usingimportto work at all - it tells meawait is a reserved word. I don’t have much going on in babel - here is my.babelrcfile contents:
{
"plugins": ["transform-class-properties"]
}
Removing .babelrc didn’t have any effect, except breaking the code I have which relies on that plugin.
I’m also curious if there is a better way to import multiple modules - I suppose I could stuff all the code into it’s own module file (actually that’s probably what I’ll do instead of) but this is what I have so far:
function handleDeckRoute (params) {
var React, Provider, AppContainer
import('react').then(_React => {
React = _React
return import('react-redux')
})
.then(m => {
// using `module` as the arg id breaks the following import statement
Provider = m.Provider
return import('/imports/containers/AppContainer')
})
.then(m => {
AppContainer = m.default
return import('react-mounter')
})
.then(m => {
const {mount, withOptions} = m
const mountWithOptions = withOptions({ rootId: 'r-mount' }, mount)
mountWithOptions(Provider, {
store, children: <AppContainer />
})
routeDispatcher(params)
})
}
- Which brings me to that comment above - I originally used
moduleas the argument identifier, but that broke the following import statement in mysterious ways. I guessed that was the problem, and changed it tominstead, and it fixed it. If there is some better way to write the above, I’d love to see it! (Like I said, I’ll probably migrate that into a separate file, and just use static imports, and import the one whole file that way.)
How can I get a list of which modules are being bundled vs loading dynamically to make sure I’m not accidentally bundling everything in the initial payload (which is what it looks like I’m doing now)?
