Webpack 懒加载

逃离我推掉我的手 2021-12-22 05:27 352阅读 0赞

官方解释：懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

**通俗来说就是，如果每次加载页面的时候都会某些代码块，会重复的请求，造成资源的浪费，影响网站性能。所以提出了懒加载的解决办法：按需加载，初始化不需要加载此代码块，等到具体的执行需要时候，再加载，从而优化性能。**

例如：在点击按钮的事件处理中，才需要用到来自print.js的print函数。所以可以将代码写成点击时候触发加载print.js。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1][]

index.js中click事件处代码：

button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
         var print = module.default;
         print();
       });

import print.js 的时候加上注释 /\* webpackChunkName: "print" \*/可以保证打包后的js文件名为print.bundle.js而非1.bundle.js。

webpack.config.js中

chunkFilename:'\[name\].bundle.js',//决定非入口chunk的名称，动态导入分离代码

完整版：

index.js

import _ from 'lodash';
     function component() {
       var element = document.createElement('div');
       var button = document.createElement('button');
       var br = document.createElement('br');
    
       button.innerHTML = 'Click me and look at the console!';
       element.innerHTML = _.join(['Hello', 'webpack'], ' ');
       element.appendChild(br);
       element.appendChild(button);
       
       button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
         var print = module.default;
         print();
       });
    
        return element;
      }
      
    document.body.appendChild(component());

print.js

console.log('The print.js module has loaded! See the network tab in dev tools...');
    
    export default () => {
      console.log('Button Clicked: Here\'s "some text"!');
    };

webpack.config.js

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70]: /images/20211220/29c2dfb128d646fb88d64dc8035d1682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3ODU1MjE5_size_16_color_FFFFFF_t_70 1]: /images/20211220/af7d120a401a4aae9e514f7281b5c6c8.png