懒加载

知识点 webpack代码拆分动态倒入
懒加载

1.懒加载

懒加载我们都知道，不即时加载所有资源，而是在需要的时候才加载。想想有这么一个业务场景，有一个页面，内容繁多，其中有一个视频播放区块，点击按钮会播放视频，视频的js是一个插件（假设功能复杂，代码量很大），用户有可能点击播放视频，也有可能不播放，而浏览页面中其他的内容，在传统的书写方式中，我们只能家在全部资源，那么如果他不点击播放，却用很多的流量去加载这个js，实在浪费。现在我们可以使用懒加载来美化这个过程，只有当用户点击播放了，我们再来加载这个js

//index.js
let button = document.createElement("button");
button.innerText = "播放";

button.addEventListener("click", function() {
  // es6 草案中的语法， 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import
  import("./source.js").then(data => {
    // promise对象
    console.log(data.default); // 挂载在了default属性上
  });
});

document.body.appendChild(button);

打包（npx webpack）时，会提醒，缺少必要的插件@babel/plugin-syntax-dynamic-import，这个插件是babel提供的，用来动态加载文件。
安装完成之后，在webpack配置文件中将这个插件加到js模块的配置中

//webpack.config.js
module: {
    noParse: /jquery/, //  第一个优化点： 不去解析jquery中的依赖库
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve("src"),
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-syntax-dynamic-import"]
            }
          }
        ]
      }
    ]
  }

打包，success.......大功告成

image

如果你跟着做到这里能达到懒加载的效果并且不报错，那么后边的就不用看了。我在做这个例子的时候，一切准备就绪之后，打包文件一直报如下错误：

Module parse failed: 'import' and 'export' may only appear at the top level (45:8)
You may need an appropriate loader to handle this file type.

google了下，可能是因为这个包“acorn”的原因，它是一个webpack的依赖，试着更新下它
npm update acorn --depth 20
到这，我的问题是解决了。

作者：成熟稳重的李先生
链接：https://www.jianshu.com/p/96fec55285ba
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。