标签: code-splitting

对于Webpack 2,是否require()做了与require.ensure()代码吐出不同的事情？

我有一个项目,从requirejs基地转换而来require()仍然有效,似乎正在适当地拆分我的应用程序.我有什么理由改变require.ensure()吗？

我使用 ES6 动态导入在我的 React 应用程序中完成代码拆分。但是，我想对应用程序进行身份验证，并注意到当 import() 出去获取 JS 块或 CSS 时，它会按预期获得 401。但是，当我通过以下方式捕获异常时：

import("Component1").then( 
    module => this.setState({ module }) ).catch( 
    err => console.log(err) 
);

通过“err”返回的错误不包含 HTTP 响应和状态代码 (401)。反正有陷阱吗？我假设 import() 必须在幕后执行 fetch() ，这将可以访问它。

我正在寻找一种解决方案，将 Tailwind PostCSS 插件（与 purgecss 插件结合）生成的大 CSS 文件拆分为多个 CSS 文件（每个消费者 JS 文件一个 CSS 文件）。JS 文件使用的 CSS 规则可以通过查看 JS 文件中使用的选择器（即类名，如 p-1 和 m-1）来检测。

知道如何实现这一目标或类似的东西吗？

我正在使用Create-React-App,我希望使用webpack 2.0支持的动态import()来导入基于变量字符串的模块.

我查看了官方提案(https://github.com/tc39/proposal-dynamic-import),似乎可以这样做:

import(`./language-packs/${navigator.language}.js`)

但是当我尝试类似的东西时,它会破裂.

AppRoutes.js

import LazyLoad from 'services/LazyLoad';

export class AppRoutes extends React.Component {
  render() {
    return (
      <Switch>
        <Route
          exact path="/"
          render={(matchProps) => (
            <LazyLoad
              absoluteModulePath='pages/default/HomePage'
              getComponent={() => import('pages/default/HomePage')}
              {...matchProps}
            />
          )}
        />
      </Switch>
    );
  }
}

export default AppRoutes;

页/默认/首页/ index.js

import React from 'react';

export const HomePage = () => {
  return (
    <div>
      I'm the default HomePage
    </div>
  );
}

export default HomePage;

BROKEN 服务/ LazyLoad/index.js

import React from 'react';

export class …

如何从多类导出js文件导入react-loadable.
我试图CustomButton从MyButton.js使用react-loadable中导入Home.js.这是我知道做的唯一方法,不起作用.

MyButton.js

import {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
} from './buttons';
module.exports = {
  CustomButton,
  BUTTON_STYLE,
  BUTTON_TYPE,
  BUTTON_SIZE,
  BUTTON_ALIGN,
  COLOR
}

Home.js

const AsyncButton = Loadable({
  loader: () => import('../../button/MyButton'),
  loading: Loading
});

请帮忙.提前致谢.

我有一个 Nuxt.js^2.10.2应用程序。

当我这样做时npm run dev，该项目完美构建。

当我做npm run build那么npm run start。一些 JS 文件出现 404 错误。

ERROR

Request URL: http://localhost:3000/_nuxt/vendors.pages/account.pages/ca.pages/cart.pages/category/_id/
index.pages/checkout/_step/index.pages/.f705ad4d.1-0-128.js
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

该文件存在于我的项目中dist/_nuxt/vendor.pages/......，文件名正确.f705ad4d.1-0-128.js

我的 nuxt.config.js

build: {,
    filenames: {
        app: '[name].' + version + '.js',
        chunk: '[name].' + version + '.js',
        vendor: '[name].' + version + '.js',
        manifest: '[name].' + version + '.js',
    },
}

我究竟做错了什么？由于其他文件正常加载。

我有一个看似相当直接的Webpack代码拆分设置,我无法迁移到Webpack 4.我有两个条目,称为main和preview.我想将初始代码拆分为vendor供应商模块中的一个块main,但我想保留preview为一个块.

Webpack 3中工作配置的相关部分:

{
  entry: {
    main: './src/application.js',
    preview: './src/preview.js',
  },
  plugins: [{
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['main'],
      minChunks({context}) {
        if (!context) {
          return false;
        }
        const isNodeModule = context.indexOf('node_modules') !== -1;
        return isNodeModule;
      },
    }),
  }]
}

具体来说,使用选项中的chunks属性CommonsChunkPlugin可以让我轻松完成我需要做的事情.Webpack 4的optimization.splitChunks配置是否有同等效力？

我有一个 2 步应用程序流程，如下所示：

const Step1 = React.lazy(() => import('./Step1'));
const Step1 = React.lazy(() => import('./Step2'));

<Suspense fallback={<Loading />}>
  <Route path="/step1" render={() => <Step1 />} />
  <Route path="/step2" render={() => <Step2 />} />
</Suspense>

使用 React.lazy，我可以<Step2 />在用户打开时延迟加载<Step1 />，这可以改善初始页面加载。但是，我想<Step2 />在用户开启时预取<Step1 />作为优化。是否有使用 React.lazy 执行此操作的 API？

编辑：

详细说明 - 我正在使用路由器来呈现两步表单。最初，用户将从 开始/step1。用户完成<Step1 />他们中的所有任务后，他们将被路由到 path /step2。此时路由器将渲染<Step2 />组件。

我在问是否有一种模式可以<Step2 />在用户仍在使用时预取<Step1 />。

我正在尝试使用react可加载和动态导入将代码拆分为多个包。拆分过程效果很好。但是，当我尝试使用魔术注释webpackChunkName让Webpack自定义包名称时，它总是将我的包命名为0.bundle.js 1.bundle.js...。

我用chunkFilename: '[name].bundle.js'我的webpack.config.js，也明确提出“ comments: true”在我的.babelrc

经过一整天的研究，我真的感到沮丧。如果有人有线索，请多谢。

这是我的配置

webpack.config.js

entry: [
    'react-hot-loader/patch',
    './app/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/'
  },

.babelrc

 {
  "presets": [
    ["env", {"modules": false}],
    "react"
  ],
  "plugins": ["transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel", "syntax-dynamic-import", "dynamic-import-webpack"],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
      ],
      "plugins": ["transform-class-properties", "transform-object-rest-spread", "dynamic-import-webpack"]
    }
  },
  "comments": true
}

路由器文件

const Login = Loadable({
  loader: () => import(/* webpackChunkName: 'LoginContainer' */ './containers/LoginContainer'),
  loading: …

我有三个文件。为什么程序仅适用于 .h 文件中的 {} 符号？

szereg.c：

    #include "szereg.h"

double szereg(double x, double eps, int *sw, int *M, int *stop){ 

    double s, w;
    int i = 2;
        s=x;
        w=x;
    do{ 
        if(*sw==*M){
            if(fabs(w)<=eps && *sw==*M)
                *stop =3;
            else
                *stop = 1;
            return s;
        }
        w=((-w*x)/i)*(i-1);
        s=s+w;
        *sw+=1;
        i++;
    } 
    while (fabs(w) >= eps); 

    *stop = 2;

    return s; 
}

szereg.h：

    double szereg(){};

主文件：

        #include <stdio.h>
        #include <math.h>
        #include <stdlib.h>
        #include "szereg.h"

        FILE *fw; 
        extern double szereg(); 

        int main(){ 

            int lp, sw=1, M, …