code-splitting

问题 I have a react app running, and I wanted to add route based code-splitting using React.lazy to it. Currently my code is, import { PureComponent, cloneElement, Suspense, lazy } from 'react'; ... export const CartPage = lazy(() => import(/* webpackMode: "lazy", webpackPrefetch: true */ 'Route/CartPage')); ... <Suspense fallback={ this.renderFallbackPage() }> <NoMatchHandler> <Switch> ... <Route path="/cart" exact component={ CartPage } /> ... </Switch> </NoMatchHandler> </Suspense> Only

问题 I am creating an app using create-react-app and lazy loading the component using react-loadable. What I want to do is import dynamic paths for the loader object or the Loadable function of react-loadble module. Code: const LoadableComponent = path => Loadable({ loader: () => import(`${path}`), loading: Loader, }) const Home = LoadableComponent('./../../pages/Home') const User = LoadableComponent('./../../pages/User') If I put the path string in the place of the path variable (Ex. import('.

问题 I am creating a React/Redux App compiled with Babel and bundled by Webpack. I want to implement a plugin feature. So I use Code Splitting with Dynamic import() to divide the main bundle for each plugin. However, if I need the same plugin in many place, Webpack will bundle a bundle for any import() used and iterate it (0.bundle.js, 1.bundle.js, ...). I try to use webpackChunkName: "MyPlugin" in comment in import() thinking that if I import a bunble with the same chunk name, it will replace the

问题 I’ve got a seemingly pretty straightforward Webpack code splitting setup that I’m having trouble migrating to Webpack 4. I have two entries, called main and preview . I want to do an initial code split into a vendor chunk for the vendor modules in main , but I want to keep preview as a single chunk. Relevant part of the working configuration in Webpack 3: { entry: { main: './src/application.js', preview: './src/preview.js', }, plugins: [{ new webpack.optimize.CommonsChunkPlugin({ name:

问题 Building a ReactJS application with Webpack. Recently interested in using code splitting to reduce app size. I've tried implementing a custom HOC that wrapped System.import(): /* async/index.tsx */ ... at a very high level looked like... class Async extends React ... { componentWillMount() { this.props.load.then(c => { this.component = c; this.setState({loaded:true}); } } render() { return this.component ? <this.component.default {...this.props} /> : <span />; } } /* async/foo/index.tsx */

问题 If I make changes to my angular app the chunk names will change on build and the old version will be remove from the dist folder. Once deployed if a user is currently on the site and then navigated to another part of the site I get a loading chunk failed error as the old file is no longer there. My app is built using angular cli so it's packaged using webpack. Is there anyway this can be overcome. 回答1: I keep my old chunks in place for a couple days after an update for just this purpose. My

问题 In a webpack 3 configuration I would use the code below to create separate vendor.js chunk: entry: { client: ['./client.js'], vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'], }, output: { filename: '[name].[chunkhash].bundle.js', path: '../dist', chunkFilename: '[name].[chunkhash].bundle.js', publicPath: '/', }, plugins: [ new webpack.HashedModuleIdsPlugin(), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', }), new webpack.optimize.CommonsChunkPlugin({ name: 'runtime', }),

问题 I have code splitting config similar to official docs and everything works perfect - all my node modules are in "vendor" chunk (including "babel-polyfill"). But now I need to move babel-polyfill and all it's dependecies to separate chunk ("polyfills") to be able to load it before my vendor bundle. Any ideas how to do that? My config: ... entry: { main: './index.jsx' }, ... new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: function (module) { return module.context && module

问题 I am trying to understand how Webpack 4 code splitting works under the hood. Is there a hidden code which makes a http request for next chunk? Follow up question: If I split code between login.js(login page) and app.js(actual app), is it possible to intercept the call from login.js for next chunk and based on successful authentication or not, serve app.js if successful or serve error.js on failed authentication? 回答1: Webpack v4 has latest upgrades. Previously if we do code splitting, You can

问题 I have an application built with webpack that uses code splitting. I now want to aggregate all common modules that match specific criteria (in this case node_modules ) across all entry chunks and all child chunks (generated via code splitting) into a single separate commons chunk. If I do this: new webpack.optimize.CommonsChunkPlugin({ children: true, async: 'vendor', minChunks: (module) => { const isVendor = module.context.split('/').some(dir => dir === 'vendor'); return isVendor; }, }),