webpack之代码分割

初聊webpack

我们都知道webpack是目前最为流行的项目打包工具之一，当然其他的打包工具也很优秀。当前较为流行的前端框架也推出了基于webpack的脚手架。比如Vue框架使用Vue-cli作脚手架，react框架使用create-react-app脚手架来搭建项目的开发环境。它们都为我们项目的开发带来便利。webpack作为代码打包工具，代码分割便显得较为重要了。今天我们来聊一聊webpack代码分割的那些事。

为什么要代码分割？

当我们的的项目开发完毕之后，项目需要打包上线，如何将项目打包呢？每个公司会有不同的要求，一个好的打包方式可以让代码更加的清晰。我们可以根据要求在配置文件中进行配置。文件超过多大被打包，模块引用多少次会被打包，等等…。下面我们来了解几种webpack代码分割的方式。

代码分割方式

默认已经搭建好了webpack的基本配置环境

方式一：

测试准备
下载第三方工具包，此处使用loadsh工具包

• 项目中不引入引入工具包

import './app.scss'
let arr = [1, 2, 3, 4]
let arr2 = _.chunk(arr, 3)
console.log(arr2)

• build项目，观察项目大小
  
• 文件引入lodash工具包

import './app.scss'
import _ from 'loadsh'
let arr = [1, 2, 3, 4]
let arr2 = _.chunk(arr, 3)
console.log(arr2)

• 再次buil代码，我们会发现打包后的包会明显变大
  
  方式一是一种简单粗暴的方法，我们可以在需要的文件中引入线上的在线包，这样就不会引起，文件的明显增大了，例如在index.html中引入laodsh.js的在线包
  

方式二：externals(外部扩展)

使用场景：如果我们大量的文件中导入了第三方工具包，我们难以进行删除，直接使用方式一我们发现没有效果，如果我们又想实现方式一中的效果，可以参考如下操作，相当于一个补丁 。

 externals: {
    lodash: 'window._'
  }

• 可以看到已经实现了相应的效果，但是这种方法很累赘。

方式三：

配置多入口，多出口文件。
当打包的时候，就根据我们配置的入口打入到不同的出口文件中，实现了代码的分割。

• 编写lodash.js文件

const _ = require('lodash')
window._ = _
module.exports = _

• 配置文件中进行如下的配置，注意二者的顺序问题，否则会不能使用：

   lodash: path.resolve(__dirname, '../src/lodash.js'),
   app: path.resolve(__dirname, '../src/app.js'),

方式四：

中代码的打包方式与vue-cli脚手架的打包方式类似，就是将将自己的逻辑代码的js和第三方的包分开打包，打入不同的包中。
使用SplitChunksPlugin插件，注意这个插件已经继承到了webpack中，不需要像其他插件一样进行配置，只需要配置optimization选项，注意这个选项在中文文档中没有记性翻译，你需要移步到webpack的英文官网中查阅参考
optimization选项配置如下：
这个选项有许多可以配置的选项，可以根据自己的需要进行相应的配置，代码中对异性常用的选项的含义进行了注释，具体的乐意参考官网。

optimization: {
    splitChunks: {
      // 模块加载的方式：异步的还是同步的 all, initial, async
      chunks: 'initial',
      // 需要打包的最小尺寸，如果模块的大小小于这个值，就不单独打包
      minSize: 30000,
      // 需要单独打包的模块需要按照这个尺寸再次拆包, 0不拆包
      maxSize: 0,
      // 单个模块被引用的次数，超过这个值的时候才会单独打包
      minChunks: 1,
      // 表示index.html页面上可以引入的.js文件最大个数
      maxInitialRequests: 6,
      // 自动命名的分隔符
      automaticNameDelimiter: '_',
      // 自动命名的文件名字的最大长度
      automaticNameMaxLength: 30,
      cacheGroups: {
        vendors: {
          // 模块载入路径的匹配
          test: /[\\/]node_modules[\\/]/,
          // 同时满足多个test匹配的时候，priority值越大，越优先
          priority: -10
        },
        jquery: {
          test: /jquery/,
          priority: 10
        },
        underscore: {
          test: /underscore/,
          priority: 20,
          name: 'underscore'
        },
        default: {
          minChunks: 2,
          priority: -20,
          // 是否重用（单独打包）已经载入的包
          reuseExistingChunk: true,
        }
      }
    }
  }

通过以上几种方法我们既可以实现代码分割了！！