Webpack和Code Spliting

系统管理员 2024-04-17 16:14 76阅读 0赞

### 文章目录 ###

*  引入
 *  Webpack与Code Spliting（代码分割）
 *  总结

# 引入 #

首先来看一个例子：

我们安装一个`ladash`的库，引入之后写下列代码：

import _ from 'lodash';
    
    console.log(_.join(['a','b','c'], ''));
    ...
    // 假设下面还有许多业务代码

首先我们假设`lodash`的大小为1MB，我们写的业务逻辑代码也有1MB，那么在未经压缩的情况下，打包出的文件就有2MB的大小，这就意味着用户每次打开页面都先要加载着2MB的文件，加载时间会很长。

其次如果**只是我们的业务逻辑代码发生了变化，再次打包之后，用户还得再重新加载一次，尽管新文件里有一半大小都是与原来一样的。**

我们自然可以想到将引入`lodash`的代码另外再打一个包：

{
        
        entry:{
        
            main: './src/index/js',
            lodash: './src/lodash.js'
        },
        ...
    }

**lodash.js：**

import _ from lodash;
    window._ = _;

因为使用了`HTMLWebpackPlugin`的缘故，因此它会自动在页面内添加打包生成的`main.js`和`lodash.js`。

通过这种方式打包生成的两个文件各1MB大小，看起来似乎也是要加载2MB大小的文件，不过由于浏览器可以并行的加载文件，所以可能会快一些。

而第二个好处更是实实在在的，当我们仅修改了业务代码逻辑之后，打包生成的文件也仅有`main.js`发生了变化，于是到了用户层面，由于浏览器对`lodash.js`有缓存，于是乎只需要重新加载`main.js`即可。

这种将代码公用部分拆分出来的做法就是**Code Spliting**。

# Webpack与Code Spliting（代码分割） #

从上面的例子中可以看出，似乎代码的分割与Webpack并没有什么关系，因为代码分割的操作是由我手动完成的。那为什么现在一说到Webpack就会提到代码分割呢？

这是因为Webpack内置了插件可以自动的帮我们进行代码分割，仅需要进行一些配置即可。我们刚刚的代码分割是手动的，而Webpack可以自动进行分割。

**webpack.config.js：**

{
        
        optimization:{
        
            splitChunks:{
        
                chunks: 'all'
            }
        }
    }

再次进行打包，会发现输出目录下多出了一个`vendors-main.js`的文件。那么这个文件就是Webpack帮我们打包的`lodash`。

--------------------

上面的是同步加载的情况，那么异步加载的情况呢？我们来写这样的一段代码：

对于这种异步加载的模块，Webpack并不能直接打包，需要安装一个叫`babel-plugin-dynamic-import-webpack`的插件。

接着在`.babelrc`内进行配置：

{
        
        plugins: ["babel-plugin-dynamic-import-webpack"]
    }

这样就可以正常打包了，值得注意的是，即便不在Webpack的配置文件中配置`optimization`，这种异步加载的模块Webpack依旧可以帮我们进行代码分割，单独打包出一个新的文件。

# 总结 #

首先，代码分割这个概念实际上和Webpack没什么关系。

这两个词总是一同出现的原因是，Webpack有内置插件，仅需要简单配置就可以自动的进行代码的分割。

最后，异步加载的模块无需进行任何的配置，Webpack就会自动进行代码的分割。

还没有评论，来说两句吧...