优秀前端必知的话题：我们应该做些力所能及的优化

正文

请到「今天看啥」查看全文

不管是简单还是复杂，作为程序员，我们应当做一些我们力所能及的优化工作，本文属于探讨性话题，希望广大网友能够在留言区留下您的一些思考。

Code Splitting

这里不探讨如何书写高性能的代码，而是探讨下我们书写的代码该如何被构建。这里以 webpack 为构建工具（版本为4.19），来阐述下在 webpack 我们该做的优化工作。

webpack 从 v4 版本开始，做了很多的优化工作，详情请看 这里 。我们就拿 Code Splitting 说起， Code Splitting 是 webpack 一项重要的编译特性，能够帮助我们将代码进行拆包，抽取出公共代码。利用这项特性我们可以做更多的优化工作，减少加载时间，例如可以做按需加载。而在 webpack 中开启 Code Splitting 也很简单，它是一项开箱即用的插件，示例代码如下：

module.export = {
    // ...
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}
复制代码

上面的 chunks 配置建议大家配置为 all ，详细配置请参考： splitChunks.chunks

这里给出个参考结果：分别为配置前和配置后

这里明显多出了几个包含 vendors~ 字样的文件，而且你会发现 app 这个文件被提取出了 vendors~app~react_vendor 和 vendors_app_redux_vendor 这两个文件。至于最大的文件为什么还有 1.02M ，我们可以使用 analyze 来分析下包的结构，这里是由于包含了 antd 的文件。

在实际开发过程中，路由也是需要进行 Code Splitting ，在过去我们经常使用 bundle-loader ，来帮助我们进行代码分割，它是基于 require.ensure 接口进行实现。既然我们可以对路由进行代码分割，那么路由页面中的组件我们是否可以按需加载，实现代码分割呢？答案是显然的。

这种业务场景也是非常的多，这里我举一个例子，就是一个登录页面，登录有多种方式，其中最常见的就是账号登录和扫码登录，默认为扫码登录。当用户没有选择账号登录，那么按道理这部分代码我们可以不进行加载，从而减少加载时间，优化用户体验。我们建议能进行 组件级 分割就分割，最大化减小页面大小。

在 React 中虽然也可以使用 bundle-loader 来实现组件级代码分割，但是也会有一些 问题 。在后来， React Router 官方也推荐使用 react-loadable 来进行代码分割。强烈建议 React 使用者使用此库，该库的功能很强大，是基于 import() 实现。它可以实现预加载、重新加载等等强大功能。

请到「今天看啥」查看全文