韦巴克.使用 `import()` 后加载块失败 [英] Wepback. Loading chunk failed after using `import()`

问题描述

我正在处理 React 项目，我发现其中一个 budles 文件太大，我需要拆分它.所以，我尝试使用 import() sintax:

从'react'导入React；从'./thumbnails.json'导入缩略图；导出默认类 Portfolio extends React.Component {构造函数(道具){超级(道具)；import('react-image-gallery').then(module => {const ImageGallery = module.default;this.galleries =thumbnails.map((thumbnail, i) => {让项目 = [];for (let i = 0; i <button className="gallery__close";onClick={this.onCloseClick.bind(this)}>&times;</button>

)});});}

Portfolio 是一个页面的主要组件.后来，当我打开页面时，出现错误 Uncaught (in promise) ChunkLoadError: Loading chunk 0 failed.
正如我所见，JavaScript 尝试从 portfolio 目录加载文件 0.bundle.js.而需要的chunk是位于根目录下的0.chunk.js.

这是我的 Wepback 配置:

const TerserPlugin = require('terser-webpack-plugin');module.exports = env =>{const isDev = env.MODE === '开发';返回 {模式: isDev ?'发展':'生产'，开发工具:'源地图'，入口: {'./home/script': './home/script.jsx','./portfolio/script': './portfolio/script.jsx','./prices/script': './prices/script.jsx','./contacts/script': './contacts/script.jsx','./extra/script': './extra/script.jsx','./extra/locations/script': './extra/locations/script.jsx','./extra/poses/script': './extra/poses/script.jsx','./extra/stylists/script': './extra/stylists/script.jsx','./extra/studio/script': './extra/studio/script.jsx',},输出: {路径:__目录名，公共路径:__dirname，文件名:'[名称].bundle.js'，chunkFilename: '[name].chunk.js',},模块: {规则: [{测试:/\.jsx?$/,排除:/node_modules/，用: {装载机:babel-loader"，选项: {预设:['@babel/preset-env', '@babel/react'],插件: ['@babel/plugin-proposal-class-properties','@babel/plugin-transform-runtime','@babel/plugin-syntax-dynamic-import',]}}},],},优化: {最小化:!isDev,最小化:[新的 TerserPlugin({测试:/.js$/i，提取评论:假，terser选项:{输出: {评论:假的，},},})],},解决: {扩展名:['.jsx', '.js'],}}};

解决方案

我找到了答案.为了避免在子目录中搜索，你应该在 webpack 的输出选项中使用 publicPath: '/' .建议使用块散列，但当我尝试时，它并不是真正必要的.整个解决方案在这里:

输出:{路径:__目录名，公共路径:'/'，文件名:'[名称].bundle.js'，chunkFilename: './assets/chunks/[name].chunk.js',}

./assets/chunks/ 部分不是必需的.它只是为了将所有块保存在一个目录中

I'm working on React project and I had found out that one of budles files is too big and I need to split it. So, I tried to use import() sintax:

import React from 'react';
import thumbnails from './thumbnails.json';

export default class Portfolio extends React.Component {
    constructor(props) {
        super(props);
        import('react-image-gallery').then(module => {
            const ImageGallery = module.default;
            this.galleries = thumbnails.map((thumbnail, i) => {
                let items = [];
                for (let i = 0; i < thumbnail.gallery.amount; i++) {
                    items.push({
                        original: `${thumbnail.gallery.href}/${i}.png`,
                        thumbnail: `${thumbnail.gallery.href}/${i}m.png`,
                    })
                }
                return (
                    <div className="gallery">
                        <ImageGallery key={i} items={items} thumbnailPosition="left" showPlayButton={false}
                                      onImageLoad={this.onGalleryLoad.bind(this, thumbnail.gallery.amount)}/>
                        <button className="gallery__close" onClick={this.onCloseClick.bind(this)}>&times;</button>
                    </div>
                )
            });
        });
    }

Portfolio is the main component for one page. Later, when I open the page, there's an error Uncaught (in promise) ChunkLoadError: Loading chunk 0 failed.
As I saw, JavaScript tries to load file 0.bundle.js from the portfolio directory. While needed chunk is 0.chunk.js that is located in the root directory.

Here's my Wepback config:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = env => {
    const isDev = env.MODE === 'development';

    return {
        mode: isDev ? 'development' : 'production',
        devtool: 'source-map',
        entry: {
            './home/script': './home/script.jsx',
            './portfolio/script': './portfolio/script.jsx',
            './prices/script': './prices/script.jsx',
            './contacts/script': './contacts/script.jsx',
            './extra/script': './extra/script.jsx',
            './extra/locations/script': './extra/locations/script.jsx',
            './extra/poses/script': './extra/poses/script.jsx',
            './extra/stylists/script': './extra/stylists/script.jsx',
            './extra/studios/script': './extra/studios/script.jsx',
        },
        output: {
            path: __dirname,
            publicPath: __dirname,
            filename: '[name].bundle.js',
            chunkFilename: '[name].chunk.js',
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env', '@babel/react'],
                            plugins: [
                                '@babel/plugin-proposal-class-properties',
                                '@babel/plugin-transform-runtime',
                                '@babel/plugin-syntax-dynamic-import',
                            ]
                        }
                    }
                },
            ],
        },
        optimization: {
            minimize: !isDev,
            minimizer: [new TerserPlugin({
                test: /.js$/i,
                extractComments: false,
                terserOptions: {
                    output: {
                        comments: false,
                    },
                },
            })],
        },
        resolve: {
            extensions: ['.jsx', '.js'],
        }
    }
};

解决方案

I've found the answer. To escape searching in subrirectories, you should use publicPath: '/' in the output option of webpack. It was sugested to use chunk hashes, but as I tried it, it's not really nesessary. The whole solution is here:

output: {
    path: __dirname,
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: './assets/chunks/[name].chunk.js',
}

The ./assets/chunks/ part is not required. It's just for holding all chunks in one directory

这篇关于韦巴克.使用 `import()` 后加载块失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！