关于前端:webpack的异步加载原理及分包策略

webpack ensure 有人称它为异步加载，也有人称为代码切割，他其实就是将 js 模块给独立导出一个.js 文件，而后应用这个模块的时候，再创立一个 script 对象，退出到 document.head 对象中，浏览器会主动帮咱们发动申请，去申请这个 js 文件，而后写个回调函数，让申请到的 js 文件做一些业务操作。

需要：main.js 依赖两个 js 文件：A.js 是点击 aBtn 按钮后，才执行的逻辑，B.js 是点击 bBtn 按钮后，才执行的逻辑。

webpack.config.js，咱们先来写一下 webpack 打包的配置的代码

const path = require('path') // 门路解决模块
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin') // 引入 CleanWebpackPlugin 插件

module.exports = {
  entry: {index: path.join(__dirname, '/src/main.js'),
  },
  output: {path: path.join(__dirname, '/dist'),
    filename: 'index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({template: path.join(__dirname, '/index.html'),
    }),
    new CleanWebpackPlugin(), // 所要清理的文件夹名称],
}

index.html 代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack</title>
  </head>
  <body>
    <div id="app">
      <button id="aBtn"> 按钮 A </button>
      <button id="bBtn"> 按钮 B </button>
    </div>
  </body>
</html>

入口文件 main.js 如下

import A from './A'
import B from './B'

document.getElementById('aBtn').onclick = function () {alert(A)
}

document.getElementById('bBtn').onclick = function () {alert(B)
}

A.js 和 B.js 的代码别离如下

// A.js
const A = 'hello A'
module.exports = A

// B.js
const B = 'hello B'
module.exports = B

此时，咱们对我的项目进行 npm run build，打包进去的只有两个文件

index.html
index.js

由此可见，此时 webpack 把 main.js 依赖的两个文件都同时打包到同一个 js 文件，并在 index.html 中引入。然而 A.js 和 B.js 都是点击相应按钮才会执行的逻辑，如果用户并没有点击相应按钮，而且这两个文件又是比拟大的话，这样是不是就导致首页默认加载的 js 文件太大，从而导致首页渲染较慢呢？那么有是否实现当用户点击按钮的时候再加载相应的依赖文件呢？

webpack.ensure 就解决了这个问题。

上面咱们将 main.js 改成异步加载的形式

document.getElementById('aBtn').onclick = function () {
  // 异步加载 A
  require.ensure([], function () {let A = require('./A.js')
    alert(A)
  })
}

document.getElementById('bBtn').onclick = function () {
  // 异步加载 b
  require.ensure([], function () {let B = require('./B.js')
    alert(B)
  })
}

此时，咱们再进行一下打包，发现多了 1.index.js 和 2.index.js 两个文件。而咱们关上页面时只引入了 index.js 一个文件，当点击按钮 A 的时候才引入 1.index.js 文件，点击按钮 B 的时候才引入 2.index.js 文件。这样就满足了咱们按需加载的需要。

require.ensure 这个函数是一个代码拆散的分割线，示意回调外面的 require 是咱们想要进行宰割进来的，即 require('./A.js')，把 A.js 宰割进来，造成一个 webpack 打包的独自 js 文件。它的语法如下

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

咱们关上 1.index.js 文件，发现它的代码如下

(window.webpackJsonp = window.webpackJsonp || []).push([[1],
  [
    ,
    function (o, n) {o.exports = 'hello A'},
  ],
])

由下面的代码能够看出：

异步加载的代码，会保留在一个全局的 webpackJsonp 中。
webpackJsonp.push 的的值，两个参数别离为异步加载的文件中寄存的须要装置的模块对应的 id 和异步加载的文件中寄存的须要装置的模块列表。
在满足某种状况下，会执行具体模块中的代码。

webpack4 官网文档提供了模块按需切割加载，配合 es6 的按需加载 import() 办法，能够做到缩小首页包体积，放慢首页的申请速度，只有其余模块，只有当须要的时候才会加载对应 js。

import()的语法非常简略。该函数只承受一个参数，就是援用包的地址，并且应用了 promise 式的回调，获取加载的包。在代码中所有被 import()的模块，都将打成一个独自的包，放在 chunk 存储的目录下。在浏览器运行到这一行代码时，就会主动申请这个资源，实现异步加载。

上面咱们将上述代码改成 import()形式。

document.getElementById('aBtn').onclick = function () {
  // 异步加载 A
  import('./A').then((data) => {alert(data.A)
  })
}

document.getElementById('bBtn').onclick = function () {
  // 异步加载 b
  import('./B').then((data) => {alert(data.B)
  })
}

此时打包进去的文件和 webpack.ensure 办法是一样的。

为什么须要懒加载？

像 vue 这种单页面利用，如果没有路由懒加载，使用 webpack 打包后的文件将会很大，造成进入首页时，须要加载的内容过多，呈现较长时间的白屏，使用路由懒加载则能够将页面进行划分，须要的时候才加载页面，能够无效的分担首页所承当的加载压力，缩小首页加载用时。

vue 路由懒加载有以下三种形式

vue 异步组件
ES6 的 import()
webpack 的 require.ensure()

这种办法次要是应用了 resolve 的异步机制，用 require 代替了 import 实现按需加载

export default new Router({
  routes: [
    {
      path: '/home',',
      component: (resolve) => require(['@/components/home'], resolve),
    },
    {
      path: '/about',',
      component: (resolve) => require(['@/components/about'], resolve),
    },
  ],
})

这种模式能够通过参数中的 webpackChunkName 将 js 离开打包。

export default new Router({
  routes: [
    {
      path: '/home',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/home')), 'home'),
    },
    {
      path: '/about',
      component: (resolve) => require.ensure([], () => resolve(require('@/components/about')), 'about'),
    },
  ],
})

vue-router 在官网提供了一种办法，能够了解也是为通过 Promise 的 resolve 机制。因为 Promise 函数返回的 Promise 为 resolve 组件自身，而咱们又能够应用 import 来导入组件。

export default new Router({
  routes: [
    {
      path: '/home',
      component: () => import('@/components/home'),
    },
    {
      path: '/about',
      component: () => import('@/components/home'),
    },
  ],
})

在 webpack 打包过程中，经常出现 vendor.js，app.js 单个文件较大的状况，这偏偏又是网页最先加载的文件，这就会使得加载工夫过长，从而使得白屏工夫过长，影响用户体验。所以咱们须要有正当的分包策略。

在 Webapck4.x 版本之前，咱们都是应用 CommonsChunkPlugin 去做拆散

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: function (module, count) {
      return (
        module.resource &&
        /.js$/.test(module.resource) &&
        module.resource.indexOf(path.join(__dirname, './node_modules')) === 0
      )
    },
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    chunks: 'initial',
    minChunks: 2,
  }),
]

咱们把以下文件独自抽离进去打包

node_modules 文件夹下的，模块
被 3 个入口 chunk 共享的模块

webpack 4 最大的改变就是破除了 CommonsChunkPlugin 引入了 optimization.splitChunks。如果你的 mode 是 production，那么 webpack4 就会主动开启 Code Splitting。

它内置的代码宰割策略是这样的：

新的 chunk 是否被共享或者是来自 node_modules 的模块
新的 chunk 体积在压缩之前是否大于 30kb
按需加载 chunk 的并发申请数量小于等于 5 个
页面初始加载时的并发申请数量小于等于 3 个

尽管在 webpack4 会主动开启 Code Splitting，然而随着我的项目工程的最大，这往往不能满足咱们的需要，咱们须要再进行个性化的优化。

咱们先找到一个优化空间较大的我的项目来进行操作。这是一个后盾管理系统我的项目，大部分内容由 3-4 个前端开发，平时开发周期较短，且大部分人没有优化意识，只是写好业务代码实现需要，日子一长，造成打包进去的文件较大，大大影响性能。

咱们先用 webpack-bundle-analyzer 剖析打包后的模块依赖及文件大小，确定优化的方向在哪。

而后咱们再看下打包进去的 js 文件

看到这两张图的时候，我心田是解体的，槽点如下

打包后生成多个将近 1M 的 js 文件，其中不乏 vendor.js 首页必须加载的大文件
xlsx.js 这样的插件没必要应用，导出 excel 更好的办法应该是后端返回文件流格局给前端解决
echart 和 iview 文件太大，应该应用 cdn 引入的办法

吐槽完之后咱们就要开始做闲事了。正是因为有这么多槽点，咱们才更好用来验证咱们优化办法的可行性。

由下面剖析可知，echart 和 iview 文件太大，此时咱们就用到 webpack4 的 optimization.splitChunks 进行代码宰割了，把他们独自抽离打包成文件。(为了更好地出现优化成果，咱们先把 xlsx.js 去掉)

vue.config.js 批改如下：

chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[/]node_modules[/]/,
          priority: 10,
          chunks: 'initial'
        },
        iview: {
          name: 'chunk-iview',
          priority: 20,
          test: /[/]node_modules[/]_?iview(.*)/
        },
        echarts: {
          name: 'chunk-echarts',
          priority: 20,
          test: /[/]node_modules[/]_?echarts(.*)/
        },
        commons: {
          name: 'chunk-commons',
          minChunks: 2,
          priority: 5,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    })
  },

此时咱们再用 webpack-bundle-analyzer 剖析一下

打包进去的 js 文件

从这里能够看出咱们曾经胜利把 echart 和 iview 独自抽离进去了，同时 vendor.js 也相应地减小了体积。此外，咱们还能够持续抽离其余更多的第三方模块。

尽管第三方模块是独自抽离进去了，然而在首页或者相应路由加载时还是要加载这样一个几百 kb 的文件，还是不利于性能优化的。这时，咱们能够用 CDN 的形式引入这样插件或者 UI 组件库。

在 index.html 引入相应 cdn 链接

<head>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/styles/iview.css" />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.4/iview.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.8/xlsx.mini.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.8/cpexcel.min.js"></script>
</body>

vue.config.js 配置 externals

configureWebpack: (config) => {
  config.externals = {
    vue: 'Vue',
    xlsx: 'XLSX',
    iview: 'iView',
    iView: 'ViewUI',
  }
}

删除之前的引入形式并卸载相应 npm 依赖包

npm uninstall vue iview echarts xlsx --save

此时咱们在来看一下打包后的状况

打包进去的 js 文件

well done ! 这时根本没有打包出大文件了，首页加载须要的 vendor.js 也只有几十 kb，而且咱们还能够进一步优化，就是把 vue 全家桶的一些模块再通过 cdn 的办法引入，比方 vue-router，vuex，axios 等。这时页面特地是首页加载的性能就失去大大地优化了。

谈谈数据状态治理和实现一个简易版 vuex
总结 18 个 webpack 插件，总会有你想要的！
搭建一个 vue-cli4+webpack 挪动端框架（开箱即用）
从零构建到优化一个相似 vue-cli 的脚手架
封装一个 toast 和 dialog 组件并公布到 npm
从零开始构建一个 webpack 我的项目
总结几个 webpack 打包优化的办法
总结 vue 常识体系之高级利用篇
总结 vue 常识体系之实用技巧
总结 vue 常识体系之根底入门篇
总结挪动端 H5 开发罕用技巧（干货满满哦！）

关于前端:webpack的异步加载原理及分包策略

webpack 异步加载原理

举个例子

require.ensure 异步加载

import() 按需加载

路由懒加载

vue 异步组件

require.ensure

ES6 的 import()

webpack 分包策略

CommonsChunkPlugin

optimization.splitChunks

利用实例

抽离 echart 和 iview

CDN 形式

举荐文章

Just My Socks（注册教程内含优惠码）

关于前端:webpack的异步加载原理及分包策略

webpack 异步加载原理

举个例子

require.ensure 异步加载

import() 按需加载

路由懒加载

vue 异步组件

require.ensure

ES6 的 import()

webpack 分包策略

CommonsChunkPlugin

optimization.splitChunks

利用实例

抽离 echart 和 iview

CDN 形式

举荐文章

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）