react-router - webpack require.ensure异步加载怎么抽出公共模块，并且这些公共模块也异步加载。

问题描述

问 题

我当前使用 react-router 异步加载组件，当是每个组件生成代码太大，公共引用的库没有分离出来
比如我自己封装了tinymce 组件，如果这个组件也写成异步加载 tinymce 又要怎么写

自成用了 webpack 大部分时间在解决打包问题，反而更费事了

tinymce 组件

import './TinyMCE.scss'
import React, { Component, PropTypes } from 'react'
import _ from 'lodash'

import tinymce from 'tinymce';
import Theme from 'tinymce/themes/modern/theme';

....

const CUSTOM_PLUGINS = 'imageplus';

DEFAULTS.plugins.split(' ').map((name) => {
    if (CUSTOM_PLUGINS.includes(name)) {
        require(`./tinymce/plugins/${name}/plugin`);
    } else {
        require(`tinymce/plugins/${name}/plugin`);
    }
});

class TinyMCE extends Component {
    ...
}

export default TinyMCE

这个组件被多个 Route 组件引用

只要引用了这个组件的 Route 的文件就 8M左右

解决方案

已解决

采用 LazyLoad 异步加载组件

或 require.ensure 提前将 tinymce 异步分包

这篇关于react-router - webpack require.ensure异步加载怎么抽出公共模块，并且这些公共模块也异步加载。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！