webpack的异步加载原理及分包策略

 webpack 异步加载原理

创新互联专业IDC数据服务器托管提供商，专业提供成都服务器托管，服务器租用，双线服务器托管，双线服务器托管，成都多线服务器托管等服务器托管服务。

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

举个例子

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

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

 
 
 
 
    
  
  
  
  
  1. const path = require('path') // 路径处理模块  
    2. 
  
  
  
  
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')  
    3. 
  
  
  
  
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 引入CleanWebpackPlugin插件  
    4. 
  
  
  
  
  4. module.exports = {  
    5. 
  
  
  
  
  5.   entry: { 
    6. 
  
  
  
  
  6.      index: path.join(__dirname, '/src/main.js'),  
    7. 
  
  
  
  
  7.   },  
    8. 
  
  
  
  
  8.   output: { 
    9. 
  
  
  
  
  9.      path: path.join(__dirname, '/dist'),  
    10. 
  
  
  
  
  10.     filename: 'index.js',  
    11. 
  
  
  
  
  11.   },  
    12. 
  
  
  
  
  12.   plugins: [  
    13. 
  
  
  
  
  13.     new HtmlWebpackPlugin({  
    14. 
  
  
  
  
  14.       template: path.join(__dirname, '/index.html'),  
    15. 
  
  
  
  
  15.     }),  
    16. 
  
  
  
  
  16.     new CleanWebpackPlugin(), // 所要清理的文件夹名称  
    17. 
  
  
  
  
  17.   ],  
    18. 
  
  
  
  
  18. } 
    19.

index.html 代码如下 

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.     
    4. 
  
  
  
  
  4.       
    5. 
  
  
  
  
  5.       
    6. 
  
  
  
  
  6.     webpack  
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.     
    9. 
  
  
  
  
  9.       
    10. 
  
  
  
  
  10.       按钮A  
    11. 
  
  
  
  
  11.       按钮B  
    12. 
  
  
  
  
  12.     
  
  •     
  •  

    • 入口文件 main.js 如下 

     
 
 
 
      
  
  
  
  
    1. import A from './A'  
      2. 
  
  
  
  
    2. import B from './B'  
      3. 
  
  
  
  
    3. document.getElementById('aBtn').onclick = function () {  
      4. 
  
  
  
  
    4.   alert(A)  
      5. 
  
  
  
  
    5. }  
      6. 
  
  
  
  
    6. document.getElementById('bBtn').onclick = function () {  
      7. 
  
  
  
  
    7.   alert(B)  
      8. 
  
  
  
  
    8. } 
      9.

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

     
 
 
 
      
  
  
  
  
    1. // A.js  
      2. 
  
  
  
  
    2. const A = 'hello A'  
      3. 
  
  
  
  
    3. module.exports = A  
      4. 
  
  
  
  
    4. // B.js  
      5. 
  
  
  
  
    5. const B = 'hello B'  
      6. 
  
  
  
  
    6. module.exports = B 
      7.

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

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

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

    require.ensure 异步加载

    下面我们将 main.js 改成异步加载的方式 

     
 
 
 
      
  
  
  
  
    1. document.getElementById('aBtn').onclick = function () {  
      2. 
  
  
  
  
    2.   //异步加载A  
      3. 
  
  
  
  
    3.   require.ensure([], function () {  
      4. 
  
  
  
  
    4.     let A = require('./A.js')  
      5. 
  
  
  
  
    5.     alert(A)  
      6. 
  
  
  
  
    6.   })  
      7. 
  
  
  
  
    7. }   
      8. 
  
  
  
  
    8. document.getElementById('bBtn').onclick = function () {  
      9. 
  
  
  
  
    9.   //异步加载b  
      10. 
  
  
  
  
    10.   require.ensure([], function () {  
      11. 
  
  
  
  
    11.     let B = require('./B.js')  
      12. 
  
  
  
  
    12.     alert(B)  
      13. 
  
  
  
  
    13.   })  
      14. 
  
  
  
  
    14. } 
      15.

    此时，我们再进行一下打包，发现多了 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 文件。它的语法如下 

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

    我们打开 1.index.js 文件，发现它的代码如下 

     
 
 
 
      
  
  
  
  
    1. (windowwindow.webpackJsonp = window.webpackJsonp || []).push([  
      2. 
  
  
  
  
    2.   [1],  
      3. 
  
  
  
  
    3.   [  
      4. 
  
  
  
  
    4.     ,  
      5. 
  
  
  
  
    5.     function (o, n) {  
      6. 
  
  
  
  
    6.       o.exports = 'hello A'  
      7. 
  
  
  
  
    7.     },  
      8. 
  
  
  
  
    8.   ],  
      9. 
  
  
  
  
    9. ]) 
      10.

    由上面的代码可以看出：

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

    import() 按需加载

    webpack4 官方文档提供了模块按需切割加载，配合 es6 的按需加载 import() 方法，可以做到减少首页包体积，加快首页的请求速度，只有其他模块，只有当需要的时候才会加载对应 js。

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

    下面我们将上述代码改成 import()方式。 

     
 
 
 
      
  
  
  
  
    1. document.getElementById('aBtn').onclick = function () {  
      2. 
  
  
  
  
    2.   //异步加载A  
      3. 
  
  
  
  
    3.   import('./A').then((data) => {  
      4. 
  
  
  
  
    4.     alert(data.A)  
      5. 
  
  
  
  
    5.   })  
      6. 
  
  
  
  
    6. }  
      7. 
  
  
  
  
    7. document.getElementById('bBtn').onclick = function () {  
      8. 
  
  
  
  
    8.   //异步加载b  
      9. 
  
  
  
  
    9.   import('./B').then((data) => {  
      10. 
  
  
  
  
    10.     alert(data.B)  
      11. 
  
  
  
  
    11.   })  
      12. 
  
  
  
  
    12. } 
      13.

    此时打包出来的文件和 webpack.ensure 方法是一样的。

    路由懒加载

    为什么需要懒加载？

    像 vue 这种单页面应用，如果没有路由懒加载，运用 webpack 打包后的文件将会很大，造成进入首页时，需要加载的内容过多，出现较长时间的白屏，运用路由懒加载则可以将页面进行划分，需要的时候才加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

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

    vue 异步组件

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

     
 
 
 
      
  
  
  
  
    1. export default new Router({  
      2. 
  
  
  
  
    2.   routes: [  
      3. 
  
  
  
  
    3.     {  
      4. 
  
  
  
  
    4.       path: '/home',',  
      5. 
  
  
  
  
    5.       component: (resolve) => require(['@/components/home'], resolve),  
      6. 
  
  
  
  
    6.     },  
      7. 
  
  
  
  
    7.     {  
      8. 
  
  
  
  
    8.       path: '/about',',  
      9. 
  
  
  
  
    9.       component: (resolve) => require(['@/components/about'], resolve),  
      10. 
  
  
  
  
    10.     },  
      11. 
  
  
  
  
    11.   ],  
      12. 
  
  
  
  
    12. }) 
      13.

    require.ensure

    这种模式可以通过参数中的 webpackChunkName 将 js 分开打包。 

     
 
 
 
      
  
  
  
  
    1. export default new Router({  
      2. 
  
  
  
  
    2.   routes: [ 
      3. 
  
  
  
  
    3.      {  
      4. 
  
  
  
  
    4.       path: '/home',  
      5. 
  
  
  
  
    5.       component: (resolve) => require.ensure([], () => resolve(require('@/components/home')), 'home'), 
      6. 
  
  
  
  
    6.     },  
      7. 
  
  
  
  
    7.     {  
      8. 
  
  
  
  
    8.       path: '/about',  
      9. 
  
  
  
  
    9.       component: (resolve) => require.ensure([], () => resolve(require('@/components/about')), 'about'),  
      10. 
  
  
  
  
    10.     },  
      11. 
  
  
  
  
    11.   ],  
      12. 
  
  
  
  
    12. }) 
      13.

    ES6 的 import()

    vue-router 在官网提供了一种方法，可以理解也是为通过 Promise 的 resolve 机制。因为 Promise 函数返回的 Promise 为 resolve 组件本身，而我们又可以使用 import 来导入组件。 

     
 
 
 
      
  
  
  
  
    1. export default new Router({  
      2. 
  
  
  
  
    2.   routes: [  
      3. 
  
  
  
  
    3.     {  
      4. 
  
  
  
  
    4.       path: '/home',  
      5. 
  
  
  
  
    5.       component: () => import('@/components/home'),  
      6. 
  
  
  
  
    6.     },  
      7. 
  
  
  
  
    7.     {  
      8. 
  
  
  
  
    8.       path: '/about',  
      9. 
  
  
  
  
    9.       component: () => import('@/components/home'),  
      10. 
  
  
  
  
    10.     },  
      11. 
  
  
  
  
    11.   ], 
      12. 
  
  
  
  
    12. }) 
      13.

    webpack 分包策略

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

    CommonsChunkPlugin

    在 Webapck4.x 版本之前，我们都是使用 CommonsChunkPlugin 去做分离 

     
 
 
 
      
  
  
  
  
    1. plugins: [  
      2. 
  
  
  
  
    2.   new webpack.optimize.CommonsChunkPlugin({  
      3. 
  
  
  
  
    3.     name: 'vendor',  
      4. 
  
  
  
  
    4.     minChunks: function (module, count) {  
      5. 
  
  
  
  
    5.       return (  
      6. 
  
  
  
  
    6.         module.resource &&  
      7. 
  
  
  
  
    7.         /.js$/.test(module.resource) &&  
      8. 
  
  
  
  
    8.         module.resource.indexOf(path.join(__dirname, './node_modules')) === 0  
      9. 
  
  
  
  
    9.       )  
      10. 
  
  
  
  
    10.     },  
      11. 
  
  
  
  
    11.   }),  
      12. 
  
  
  
  
    12.   new webpack.optimize.CommonsChunkPlugin({  
      13. 
  
  
  
  
    13.     name: 'common',  
      14. 
  
  
  
  
    14.     chunks: 'initial',  
      15. 
  
  
  
  
    15.     minChunks: 2,  
      16. 
  
  
  
  
    16.   }),  
      17. 
  
  
  
  
    17. ] 
      18.

    我们把以下文件单独抽离出来打包

    optimization.splitChunks

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

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

    虽然在 webpack4 会自动开启 Code Splitting，但是随着项目工程的最大，这往往不能满足我们的需求，我们需要再进行个性化的优化。

    应用实例

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

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

    然后我们再看下打包出来的 js 文件

    看到这两张图的时候，我内心是崩溃的，槽点如下

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

    抽离 echart 和 iview

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

    vue.config.js 修改如下： 

     
 
 
 
      
  
  
  
  
    1. chainWebpack: config => {  
      2. 
  
  
  
  
    2.     config.optimization.splitChunks({  
      3. 
  
  
  
  
    3.       chunks: 'all',  
      4. 
  
  
  
  
    4.       cacheGroups: {  
      5. 
  
  
  
  
    5.         vendors: {  
      6. 
  
  
  
  
    6.           name: 'chunk-vendors',  
      7. 
  
  
  
  
    7.           test: /[/]node_modules[/]/,  
      8. 
  
  
  
  
    8.           priority: 10,  
      9. 
  
  
  
  
    9.           chunks: 'initial'  
      10. 
  
  
  
  
    10.         },  
      11. 
  
  
  
  
    11.         iview: {  
      12. 
  
  
  
  
    12.           name: 'chunk-iview',  
      13. 
  
  
  
  
    13.           priority: 20,  
      14. 
  
  
  
  
    14.           test: /[/]node_modules[/]_?iview(.*)/  
      15. 
  
  
  
  
    15.         },  
      16. 
  
  
  
  
    16.         echarts: {  
      17. 
  
  
  
  
    17.           name: 'chunk-echarts',  
      18. 
  
  
  
  
    18.           priority: 20,  
      19. 
  
  
  
  
    19.           test: /[/]node_modules[/]_?echarts(.*)/  
      20. 
  
  
  
  
    20.         },  
      21. 
  
  
  
  
    21.         commons: {  
      22. 
  
  
  
  
    22.           name: 'chunk-commons',  
      23. 
  
  
  
  
    23.           minChunks: 2,  
      24. 
  
  
  
  
    24.           priority: 5,  
      25. 
  
  
  
  
    25.           chunks: 'initial',  
      26. 
  
  
  
  
    26.           reuseExistingChunk: true  
      27. 
  
  
  
  
    27.         }  
      28. 
  
  
  
  
    28.       }  
      29. 
  
  
  
  
    29.     })  
      30. 
  
  
  
  
    30.   }, 
      31.

    此时我们再用 webpack-bundle-analyzer 分析一下

    打包出来的 js 文件

    从这里可以看出我们已经成功把 echart 和 iview 单独抽离出来了，同时 vendor.js 也相应地减小了体积。此外，我们还可以继续抽离其他更多的第三方模块。

    CDN 方式

    虽然第三方模块是单独抽离出来了，但是在首页或者相应路由加载时还是要加载这样一个几百 kb 的文件，还是不利于性能优化的。这时，我们可以用 CDN 的方式引入这样插件或者 UI 组件库。

        1.  在 index.html 引入相应 cdn 链接 

     
 
 
 
      
  
  
  
  
    1.   
      2. 
  
  
  
  
    2.    
      3. 
  
  
  
  
    3.   
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.   
      
  •     
  •     
  •     
  •     
  •  

    •     1.  vue.config.js 配置 externals 

     
 
 
 
      
  
  
  
  
    1. configureWebpack: (config) => {  
      2. 
  
  
  
  
    2.   config.externals = {  
      3. 
  
  
  
  
    3.     vue: 'Vue',  
      4. 
  
  
  
  
    4.     xlsx: 'XLSX',  
      5. 
  
  
  
  
    5.     iview: 'iView',  
      6. 
  
  
  
  
    6.     iView: 'ViewUI',  
      7. 
  
  
  
  
    7.   }  
      8. 
  
  
  
  
    8. } 
      9.

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

     
 
 
 
      
  
  
  
  
    1. npm uninstall vue iview echarts xlsx --save 
      2.

    此时我们在来看一下打包后的情况

    打包出来的 js 文件

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

    名称栏目：webpack的异步加载原理及分包策略
    分享地址：http://www.gawzjz.com/qtweb/news25/164225.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    App开发知识

    同城分类信息

    橡塑保温管　　 　盐亭网站设计　　 　响应式网站　　 　犀浦防纹窗　　 　遂宁网站建设　　 　重庆app软件开发　　 　网站空间　　 　成都店面装修公司　　 　教育建设方案　　 　移动网站建设　　 　专业网站设计　　 　成都小谭网创广告　　 　营销网站建设　　 　成都模板网站　　 　成都商城网站建设　　 　腾讯云香港虚拟主机　　 　wap网站制作　　 　网站建设公司　　 　营销型网站建设　　 　医药医疗网站建设方案