标签: code-splitting

TL;DR：您能否解释一下何时bundle-loader需要使用 Webpack 进行代码分割？

require当我开始将基于 Backbone 的应用程序从 Require.js 迁移到 Webpack 时，我记得路由器中的这种语句：

someMatchedRoute: function () {\n    require([\'path-to-file\'], function(module) {\n        // doing something with the loaded module\n        module();\n    });\n}\n

会将所需的代码与其余代码放在同一个包中，并且为了生成切换到特定路由时动态需要的单独文件，我需要使用bundle-loader，如下所示：

// a function executed when the user\xe2\x80\x99s profile route is matched\nsomeMatchedRoute: function () {\n    require(\'bundle!path-to-file\')(function(module) {\n        // doing something with the loaded module\n        module();\n    });\n}\n

现在，当我将代码库迁移到 ES6 模块并使用所述require.ensure语法时Webpack 文档中

someMatchedRoute: function () {\n    require.ensure([\'path-to-file\'], function(require) {\n        var …

使用webpack2.2.0-rc1并对routerv4做出反应,并使用此要点使代码拆分工作,其中说明以下内容

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

const Foo = asyncComponent(() =>
  System.import('./Foo').then(module => module.default)
)

它确实有效,但我正在使用服务器端渲染.所以在服务器上我需要组件A,然后在客户端I System.import组件A.当我访问延迟加载的路由时,我得到这个反应重用标记警告,因为客户端呈现最初从https://gist.github加载null .com/acdlite/a68433004f9d6b4cbc83b5cc3990c194#file-app-js-L21 加载组件A. Warning: React attempted to reuse …

如何在VueJS中实现渐进式渲染,仅在客户端？

我试图将多个Vue组件导入为一个块,我最好只使用它magic comment来分配一次chunkname.

这是我尝试过的:

import(/* webpackChunkName: 'googlemap' */ '@/components/maps');

以及我导入的文件:

import Vue from 'vue';

Vue.component('google-map', () => import('@/components/maps/GoogleMapAsync.vue'));
Vue.component('widget', () => import('@/components/maps/widgets/WidgetAsync.vue'));
Vue.component('price-widget', () => import('@/components/maps/widgets/PriceWidgetAsync.vue'));
Vue.component('map-marker', () => import('@/components/maps/marker/MapMarkerAsync.vue'));
Vue.component('map-price-marker', () => import('@/components/maps/marker/MapPriceMarkerAsync.vue'));

这不会创建名称为的正确的块googlemap.以前我只是简单地把webpackChunkName每个导入放在前面,但我只想分配webpackChunkName一次,因为这些组件只会被分组.

我想做的事情与此基本相同:

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49#697a

还有另一种方法让这个工作吗？

我正在使用 Webpack 4.x 并在我的配置中有以下内容：

splitChunks: {
    chunks: 'all',
},
runtimeChunk: true

这导致我的项目分为三个部分：

• 应用程序.prod.js
• 1.app.prod.js
• 2.app.prod.js

我想仅使用一个初始请求加载所有三个脚本。这样做的原因是出于安全原因，我想在 Electron 中使用“预加载”功能，它接受单个脚本。

有没有办法让初始app.prod.js需求/自动导入额外的块？

我最终围绕路由进行了一些重构以允许代码拆分，但按照 react/webpack 说明，我仍然只生成了 2 个入口包。

Index.tsx

import React from "react"
import { render } from "react-dom"
import { Provider } from "react-redux"
import { store } from "services/configureStore"
import { ConnectedApp } from "src/App"
import { ConnectedFeatureToggleProvider } from "./components/AppWrapper/FeatureToggleProvider"

const renderApp = () => {
  render(
    <Provider store={store}>
      <ConnectedFeatureToggleProvider>
        <ConnectedApp />
      </ConnectedFeatureToggleProvider>
    </Provider>,
    document.querySelector("#app"),
  )
}

// run app when FIT Core functions are ready
window.onFitCoreReady = () => {
  renderApp()
}

App.tsx

import React, { useEffect, Suspense } …

我有一个使用 Webpack 和 React 构建的简单 PWA 应用程序。它具有动态进口代码分裂设置（如React.lazy(() => import('./SomeRoute'))）等不同途径得到不同的JS包，如：main.bundle.js，someRoute.bundle.js

现在想象一下这种情况：我部署了一个完全没有SomeRoute或完全不同的应用程序的新版本。该应用程序将尝试到达https://myapp.com/someRoute.bundle.js并失败，因为该资产不再存在。应用程序重新加载显然会有所帮助，但仍然不会是一种愉快的行为。

我看到的一种解决方案是将内容哈希包含到所有资产中，someRoute.1e4f.js然后将所有这些不同的应用程序版本托管一段时间，直到所有应用程序用户都拥有该应用程序的最新版本。

如果这是要走的路，那么我不知道如何组织它。我目前使用 vercel.com（例如 Zeit）托管我的 PWA，我从来没有看到它们是否具有保持过去构建中资产可用的功能。当然，我可以将所有构建工件提交到 git 中，但这会很快使 repo 膨胀。

另一种解决方案是在初始加载时预取所有应用程序的路由，并将它们缓存在 Service Worker 中。这显然会有所帮助，但它违背了代码拆分以减少网络流量使用的目的。

另一种解决方案是检测 JS 块上的 404 并强制重新加载应用程序。对于某些用户来说，这将是一个非常不愉快的用户体验。

那么严肃的应用程序如何处理它呢？我很惊讶这么重要的问题如何缺乏关注。

在 Expo 网络项目中是否有推荐的代码拆分方法？

我在文档中找不到任何内容，即使在网页性能页面上：https : //docs.expo.io/guides/web-performance/

我很惊讶，因为这是很多（可能是大多数）网络应用程序想要做的事情。如果它不受官方支持，是否有解决方法？

我有一个 React/Node + SSR 应用程序，我正在尝试创建一个生产构建，我已经设法做到了，但问题是我在构建中的文件太大了。我使用最新版本的 react + webpack 4。这是我的 webpack 配置：

客户端配置文件

const path = require('path');
const common = require('./webpack.common-config');

const clientConfig = {
  ...common,
  mode: 'production',
  name: 'client',
  target: 'web',
  devtool: false,
  entry: {
    client: [
      '@babel/polyfill',
      './src/client.js'
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          name: 'vendor',
          test: module => /node_modules/.test(module.resource),
          enforce: true
        },
        common: {
          chunks: 'all',
          name: 'client'
        }
      },
    },
  },
  node: { …

我最近了解了延迟加载组件并开始使用它。现在我正在尝试预取延迟加载的组件以及vue-router路由。但是使用 chrome devtools 我发现只有当我们实际导航到延迟加载的路由（在 vue-router 路由的情况下）或当v-if评估为true并呈现组件时（在延迟加载的情况下）才加载延迟加载的块成分）。

我还尝试webpackPrefetch: true在路由器中使用魔术字符串以及组件导入语句，但这样做似乎没有任何区别。

项目结构：
主从布局

路由器配置：

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

var routes = [  
  {
    path: "/DetailPage",
    component: () => import(/* webpackChunkName: "Detail-chunk" */ "AppModules/views/MyModuleName/DetailPage.vue")
  },
  {
    path: "/MasterPage",
    component: () => import("AppModules/views/MyModuleName/MasterPage.vue")
  }
]

export const router = new Router({
  routes: routes,
  stringifyQuery(query) {
    // encrypt query string here
  }
});

export default router;

主视图：

<template> 
  <div @click="navigate">
    Some text
  </div> …