-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
Description
Do you want to request a feature or report a bug?
I would like to report a bug.
What is the current behavior?
When converting my project's components to dynamically import components instead of using static import statements, the build time increases by 10x and incremental builds by about the same.
The dynamic import functionality has reduced my bundle size astronomically by breaking all of my react components into separate chunks that get loaded into the app on-demand. I used a react-loader setup to replace most of my component static imports with dynamic imports.
If the current behavior is a bug, please provide the steps to reproduce.
- Create a large number static imports in your project.
- Convert those imports into dynamic imports.
- Run webpack-dev-server with hot-reloading for both and compare the build time.
//Static Example: index.js
import ComponentA from './component-a';
import ComponentB from './component-b';
export { ComponentA, ComponentB }
//Dynamic Example: index.js
import Loadable from 'react-loadable';
const LoadingComponent = f => {
return (
<div style={{textAlign:'center'}}><i className="fa fa-spinner fa-spin fa-2x"></i></div>
)
}
const LoadableComponent = opts => {
return Loadable({
delay: 300,
LoadingComponent,
...opts,
})
}
const ImportLoadable = (loader) => {
const Component = LoadableComponent({
loader
});
return Component;
}
const ComponentA = ImportLoadable(f => import('./component-a'));
const ComponentB = ImportLoadable(f => import('./component-b'));
export { ComponentA, ComponentB }What is the expected behavior?
I expect the dynamic import build time to be the same as a static import build time.
If this is a feature request, what is motivation or use case for changing the behavior?
It seems that even though the dynamic import automatically chunks your bundle into multiple files, that when changing the underlying code for one of those chunks, webpack should be able to detect which file that was and only rebuild that file and hot-reload it.
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
Webpack 2.3.2
Webpack-Dev-Server 2.4.2