JS 代码分割

对于大型应用来说，将代码分割成不同块，按照业务需求分批加载，可以加快页面加载速度，提升用户体验

思路

• 抽离相同代码到公共模块
• 脚本懒加载

方案

脚本懒加载

有两种方式。一种是使用 CommonJS 的 require.ensure；另一种是使用 ES6 的 动态 import。第二种方式需要依赖 babel 转换（plugin-babel-dynamic-import），因为原生还没有支持。

因为 webpack 中的许多优化项依赖于 ES6 语法，所以推荐使用第二种方式来实现懒加载。

// test.js
import React from "react";

export default ()=> <div>动态 import</div>

// search.js
import React from 'react';
import ReactDOM from 'react-dom';

class Search extends React.Component {
    
    constructor() {
        super(...arguments);
        this.state = {
            Text: null
        };
    }
    
    loadComponent() {
        import('./test.js').then((Text) => {
            this.setState({
                Text: Text.default
            });
        });
    }

    render() {
        return <div onClick={ this.loadComponent.bind(this) }>
            { Text ? <Text/> : null }
            Search Page
        </div>;
    }
}

ReactDOM.render(
    <Search />,
    document.getElementById('root')
);

公共代码提取（代码分割）

代码分割是通过 webpack 插件来实现，详见 Webpack 常用 loader 和 plugin 汇总