webpack优化之玩转代码分割和公共代码提取

时间  2019-11-21
标签 webpack 优化 代码 分割 公共 提取 繁體版
原文   原文链接

前言

开发多页应用的时候，若是不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包屡次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务愈来愈复杂，打包出来的代码会很是冗余，文件体积会很是庞大。大致积文件会增长编译时间，影响开发效率；若是直接上线，还会拉长请求和加载时长，影响网站体验。做为一个追求极致体验的攻城狮，是不能忍的。因此在多页应用中优化打包尤其必要。那么如何优化webpack打包呢？html

1、概念

在一切开始前，有必要先理清一下这三个概念：node

  • module: 模块，在webpack眼里，任何能够被导入导出的文件都是一个模块。

  • chunk: chunk是webpack拆分出来的：jquery

    • 每一个入口文件都是一个chunk
    • 经过 import、require 引入的代码也是
    • 经过 splitChunks 拆分出来的代码也是
  • bundle: webpack打包出来的文件，也能够理解为就是对chunk编译压缩打包等处理后的产出。

2、问题分析

首先，简单分析下，咱们刚才提到的打包问题：webpack

  • 核心问题就是：多页应用打包后代码冗余，文件体积大。
  • 究其缘由就是：相同模块在不一样入口之间没有获得复用，bundle之间比较独立。

弄明白了问题的缘由，那么大体的解决思路也就出来了：git

  • 咱们在打包的时候，应该把不一样入口之间，共同引用的模块，抽离出来，放到一个公共模块中。这样无论这个模块被多少个入口引用，都只会在最终打包结果中出现一次。——解决代码冗余。
  • 另外，当咱们把这些共同引用的模块都堆在一个模块中，这个文件可能异常巨大，也是不利于网络请求和页面加载的。因此咱们须要把这个公共模块再按照必定规则进一步拆分红几个模块文件。——减少文件体积。

  • 至于如何拆分，方式因人而异，因项目而异。我我的的拆分原则是：github

    • 业务代码和第三方库分离打包，实现代码分割；
    • 业务代码中的公共业务模块提取打包到一个模块；
    • 第三方库最好也不要所有打包到一个文件中，由于第三方库加起来一般会很大，我会把一些特别大的库分别独立打包，剩下的加起来若是还很大，就把它按照必定大小切割成若干模块。

optimization.splitChunks

webpack提供了一个很是好的内置插件帮咱们实现这一需求：CommonsChunkPlugin。不过在 webpack4 中CommonsChunkPlugin被删除，取而代之的是optimization.splitChunks, 所幸的是optimization.splitChunks更强大！web

3、 实现

经过一个多页应用的小demo，咱们一步一步来实现上述思路的配置。正则表达式

demo目录结构：npm

|--public/
|   |--a.html
|   |--index.html
|--src/
|   |--a.js
|   |--b.js
|   |--c.js
|   |--index.js
|--package.json
|--webpack.config.js

代码逻辑很简单，index模块中引用了 a 和 b 2个模块，a 模块中引用了 c 模块和 jquery库，b 模块中也引用了 c 模块和 jquery 库，c 是一个独立的模块没有其余依赖。json

index.js代码以下：

//index.js
import a from './a.js';
import b from './b.js';
function fn() {
    console.log('index-------');
}
fn();

a.js代码以下：

//a.js
require('./c.js');
const $ = require('jquery')
function fn() {
    console.log('a-------');
}
module.exports = fn();

b.js代码以下：

//b.js
require('./c.js');
const $ = require('jquery')
function fn() {
    console.log('b-------');
}
module.exports = fn();

c.js代码以下：

//c.js
function fn() {
    console.log('c-------');
}
module.exports = fn();

1. 基本配置

webpack先不作优化，只作基本配置，看看效果。项目配置了2个入口，搭配html-webpack-plugin实现多页打包：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        a: './src/a.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            template: './public/a.html',
            filename: 'a.html'
        })
    ]
}

在开发模式下运行webpack：
webpack-normal-build.jpg

能够看到，打包出两个html和两个体积很大的（300多K）的文件a.js,index.js。

进入dist目录检查js文件：

  • a.js里包含c模块代码和jquery代码
  • index.js里包含a模块、b模块、c模块和jquery代码

看，一样的代码c和jquery被打包了2遍。

2. 初步添加splitChunks优化配置

首先解决相同代码打包2次的问题，咱们须要让webpack把c和jquery提取出来打包为公共模块。

在webpack配置文件添加splitChunks：

//webpack.config.js

optimization: {
    splitChunks: {
        cacheGroups: {
            default: {
                name: 'common',
                chunks: 'initial'
            }
        }
    }
}

- cacheGroups

  • cacheGroups是splitChunks配置的核心，对代码的拆分规则全在cacheGroups缓存组里配置。
  • 缓存组的每个属性都是一个配置规则，我这里给他的default属性进行了配置，属性名能够不叫default能够本身定。
  • 属性的值是一个对象，里面放的咱们对一个代码拆分规则的描述。

- name

  • name：提取出来的公共模块将会以这个来命名，能够不配置，若是不配置，就会生成默认的文件名，大体格式是index～a.js这样的。

- chunks

  • chunks：指定哪些类型的chunk参与拆分，值能够是string能够是函数。若是是string，能够是这个三个值之一：all, async, initial，all 表明全部模块，async表明只管异步加载的, initial表明初始化时就能获取的模块。若是是函数，则能够根据chunk参数的name等属性进行更细致的筛选。

再次打包：
webpack-optimize-build.jpg

能够看到a.js,index.js从300多K减小到6点几K。同时增长了一个common.js文件，而且两个打包入口都自动添加了common.js这个公共模块：
webpack-optimize-build2.jpg

进入dist目录，依次查看这3个js文件：

  • a.js里不包含任何模块的代码了，只有webpack生成的默认代码。
  • index.js里一样不包含任何模块的代码了，只有webpack生成的默认代码。
  • common.js里有a,b,c,index,jquery代码。

发现，提是提取了，可是彷佛跟咱们预料的不太同样，全部的模块都跑到common.js里去了。

这是由于咱们没有告诉webpack（splitChunks）什么样的代码为公共代码，splitChunks默认任何模块都会被提取。

- minChunks

splitChunks是自带默认配置的，而缓存组默认会继承这些配置，其中有个minChunks属性：

  • 它控制的是每一个模块何时被抽离出去：当模块被不一样entry引用的次数大于等于这个配置值时，才会被抽离出去。
  • 它的默认值是1。也就是任何模块都会被抽离出去（入口模块其实也会被webpack引入一次）。

咱们上面没有配置minChunks，只配置了name和chunk两个属性，因此minChunks的默认值 1 生效。也难怪全部的模块都被抽离到common.js中了。

优化一下，在缓存组里配置minChunks覆盖默认值：

//webpack.config.js

optimization: {
    splitChunks: {
        cacheGroups: {
            default: {
                name: 'common',
                chunks: 'initial',
                minChunks: 2  //模块被引用2次以上的才抽离
            }
        }
    }
}

而后运行webpack

webpack-optimize-build3.jpg

能够看到有2个文件的大小发生了变化：common.js由314K减少到311K，index.js由6.22K增大到7.56K。

进入dist目录查看：

  • a.js里依然不包含任何模块的代码（正常，由于a做为模块被index引入了一次，又做为入口被webpack引入了一次，因此a是有2次引用的）。
  • index.js里出现了b和index模块的代码了。
  • common.js里只剩a,c,和jquery模块的代码。

如今咱们把共同引用的模块a, c, jquery，从a和index这两个入口模块里抽取到common.js里了。有点符合咱们的预期了。

3. 配置多个拆分规则

3.1 实现代码分离，拆分第三方库

接下来，我但愿公共模块common.js中，业务代码和第三方模块jquery可以剥离开来。

咱们须要再添加一个拆分规则。

//webpack.config.js

optimization: {
    splitChunks: {
        minSize: 30,  //提取出的chunk的最小大小
        cacheGroups: {
            default: {
                name: 'common',
                chunks: 'initial',
                minChunks: 2,  //模块被引用2次以上的才抽离
                priority: -20
            },
            vendors: {  //拆分第三方库（经过npm|yarn安装的库）
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'initial',
                priority: -10
            }
        }
    }
}

我给cacheGroups添加了一个vendors属性（属性名能够本身取，只要不跟缓存组下其余定义过的属性同名就行，不然后面的拆分规则会把前面的配置覆盖掉）。

- minSize

minSize设置的是生成文件的最小大小，单位是字节。若是一个模块符合以前所说的拆分规则，可是若是提取出来最后生成文件大小比minSize要小，那它仍然不会被提取出来。这个属性能够在每一个缓存组属性中设置，也能够在splitChunks属性中设置，这样在每一个缓存组都会继承这个配置。这里因为个人demo中文件很是小，为了演示效果，我把minSize设置为30字节，好让公共模块能够被提取出来，正常项目中不用设这么小。

- priority

priority属性的值为数字，能够为负数。做用是当缓存组中设置有多个拆分规则，而某个模块同时符合好几个规则的时候，则须要经过优先级属性priority来决定使用哪一个拆分规则。优先级高者执行。我这里给业务代码组设置的优先级为-20，给第三方库组设置的优先级为-10，这样当一个第三方库被引用超过2次的时候，就不会打包到业务模块里了。

- test

test属性用于进一步控制缓存组选择的模块，与chunks属性的做用有一点像，可是维度不同。test的值能够是一个正则表达式，也能够是一个函数。它能够匹配模块的绝对资源路径或chunk名称，匹配chunk名称时，将选择chunk中的全部模块。我这里用了一个正则/[\\/]node_modules[\\/]/来匹配第三方模块的绝对路径，由于经过npm或者yarn安装的模块，都会存放在node_modules目录下。

运行一下webpack：
webpack-optimize-build4.jpg

能够看到新产生了一个叫vendor.js的文件（name属性的值），同时common.js文件体积由原来的311k减小到了861bytes！

进入dist目录，检查js文件：

  • a.js里不包含任何模块代码。
  • common.js只包含a和c模块的代码。
  • index.js只包含b和index模块的代码。
  • vendor.js只包含jquery模块的代码。

如今，咱们在上一步的基础上，成功从common.js里把第三方库jquery抽离出来放到了vendor.js里。

3.2 拆分指定文件

若是咱们还想把项目中的某一些文件单独拎出来打包（好比工程本地开发的组件库），能够继续添加拆分规则。好比个人src下有个locallib.js文件要单独打包，假设a.js中引入了它。

//a.js
require('./c.js');
require('./locallib.js');  //引入本身本地的库
const $ = require('jquery')
function fn() {
    console.log('a-------');
}
module.exports = fn();

能够这么配置：

//webpack.config.js

optimization: {
    splitChunks: {
        minSize: 30,  //提取出的chunk的最小大小
        cacheGroups: {
            default: {
                name: 'common',
                chunks: 'initial',
                minChunks: 2,  //模块被引用2次以上的才抽离
                priority: -20
            },
            vendors: {  //拆分第三方库（经过npm|yarn安装的库）
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'initial',
                priority: -10
            },
            locallib: {  //拆分指定文件
                test: /(src\/locallib\.js)$/,
                name: 'locallib',
                chunks: 'initial',
                priority: -9
            }
        }
    }
}

我在缓存组下又新增了一个拆分规则，经过test正则指定我就要单独打包src/locallib.js文件，而且把优先级设置为-9，这样当它被屡次引用时，不会进入其余拆分规则组，由于另外两个规则的优先级都比它要低。

运行webpack打包后：
webpack-optimize-build5.jpg

能够看到新产生了一个locallib.js文件。进入dist目录查看：

  • a.js里不包含任何模块代码。
  • common.js只包含a和c模块的代码。
  • index.js只包含b和index模块的代码。
  • vendor.js只包含jquery模块的代码。
  • locallib.js里只包含locallib模块的代码。

如今咱们又在上一步的基础上独立打包了一个指定的模块locallib.js。

至此，咱们就成功实现了抽离公共模块、业务代码和第三方代码剥离、独立打包指定模块。

对比一下，优化前，打包出来js一共有633KB：

webpack-before-optimize.png

优化后，打包出来js一共不到330KB：

webpack-after-optimize.png

优化打包后的文件分类清晰，体积比优化前缩小了几乎50%，有点小完美是否是！击掌！这还只是我举的一个简单例子，在实际多页应用中，优化力度说不定还不止这么多。

小结

webpack很强大，以上只是冰山一角，可是只要掌握了上述optimization.splitChunks的核心配置，咱们就能够几乎为所欲为地按照本身的想法来拆分优化代码控制打包文件了，是否是很酷？玩转代码拆分，你也能够！

若是以为这些依然不能知足你的需求，还想更精(bian)细(tai)地定制打包规则，能够到 webpack官网查看 optimization.splitChunks的更多配置。

欢迎交流～

本文的完整webpack配置和demo源码能够在这里获取：
https://github.com/yc111/webp...

--

欢迎转载，转载请注明出处：
https://champyin.com/2019/11/...

本文同步发表于：
webpack优化之玩转代码分割和公共代码提取 | 掘金

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程