乐趣区

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

jiezi

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 就解决了这个问题。

require.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'},
  ],
])

由下面的代码能够看出：

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

import() 按需加载

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()

vue 异步组件

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

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

require.ensure

这种模式能够通过参数中的 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'),
    },
  ],
})

ES6 的 import()

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 分包策略

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

CommonsChunkPlugin

在 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 共享的模块

optimization.splitChunks

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

由下面剖析可知，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 也相应地减小了体积。此外，咱们还能够持续抽离其余更多的第三方模块。

CDN 形式

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

  1. 在 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>
  1. vue.config.js 配置 externals
configureWebpack: (config) => {
  config.externals = {
    vue: 'Vue',
    xlsx: 'XLSX',
    iview: 'iView',
    iView: 'ViewUI',
  }
}
  1. 删除之前的引入形式并卸载相应 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 开发罕用技巧（干货满满哦！）

退出移动版