webpack中的魔法注释

魔术注释

魔术注释是由 Webpack 提供的，可以为代码分割服务的一种技术。通过在 import 关键字后的括号中使用指定注释，我们可以对代码分割后的 chunk 有更多的控制权，让我们看一个例子：

// index.js
 import (
   /* webpackChunkName: "my-chunk-name" */
   './footer'
 )
 同时，也要在 webpack.config.js 中做一些改动：
 // webpack.config.js
 {
   output: {
     filename: "bundle.js",
     chunkFilename: "[name].lazy-chunk.js"
   }
 }

通过这样的配置，我们可以对分离出的 chunk 进行命名，这对于我们 debug 而言非常方便。

Webpack Modes

除了上面提到过的 webpackChunkName 注释外，Webpack 还提供了一些其他注释让我们能够对异步加载模块拥有更多控制权，例如下方这个例子：

import (
   /* webpackChunkName: "my-chunk-name" */
   /* webpackMode: lazy */
   './someModule'
 )

webpackMode 的默认值为 lazy 它会使所有异步模块都会被单独抽离成单一的 chunk，若设置该值为 lazy-once，Webpack 就会将所有带有标记的异步加载模块放在同一个 chunk 中。

Prefetch or Preload

通过添加 webpackPrefetch魔术注释,Webpack令我们可以使用与 <link rel="prefetch"> 相同的特性。让浏览器会在 Idle 状态时预先帮我们加载所需的资源，善用这个技术可以使我们的应用交互变得更加流畅。

import(
  /* webpackPrefetch: true */
  './someModule'
)

注意：请确保你的代码在未来一定会用到时，再开启该功能。