webpack魔法注释
- 通过在代码中写入魔法注释，来实现一些 webpack 的特性，例如给 chunk 命名、选择不同模式等。

webpack魔法注释

Module Methods | webpack
https://webpack.js.org/api/module-methods/#import-1

import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

webpack的MagicComments（魔法注释） - 掘金
https://juejin.cn/post/7074895794406424583

通过在代码中写入魔法注释，来实现一些 webpack 的特性，例如给 chunk 命名、选择不同模式等。

// 单个目标
import(
  /* webpackChunkName: "my-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  '$module'
);
// 多个可能的目标
import(
  /* webpackInclude: /.json$/ */
  /* webpackExclude: /.noimport.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);
// webpackIgnore的值设置为true时，会禁用动态导入解析，并且不会进行代码分割！
import(/* webpackIgnore: true */ 'ignored-module');

以上代码列出了魔法注释中可能的取值。

webpackChunkName: string

新 chunk 的名称。从 webpack 2.6.0 开始，占位符 [index] 和 [request]分别支持递增的数字或实际的解析文件名。添加此注释后，将单独的给我们的 chunk 命名为 [my-chunk-name].js 而不是 [id].js。

webpackMode: ‘lazy’ | ‘lazy-once’ | ‘eager’ | ‘weak’

从 webpack 2.6.0 开始，可以指定以不同的模式解析动态导入。

‘lazy’: (默认值)：为每个 import() 导入的模块生成一个可延迟加载（lazy-loadable）的 chunk。
‘lazy-once’：生成一个可以满足所有 import() 调用的单个可延迟加载（lazy-loadable）的 chunk。此 chunk 将在第一次 import() 时调用时获取，随后的 import() 则使用相同的网络响应。注意，这种模式仅在部分动态语句中有意义，例如 import(./locales/${language}.json)，其中可能含有多个被请求的模块路径。
‘eager’：不会生成额外的 chunk。所有的模块都被当前的 chunk 引入，并且没有额外的网络请求。但是仍会返回一个 resolved 状态的 Promise。与静态导入相比，在调用 import() 完成之前，该模块不会被执行。
‘weak’：尝试加载模块，如果该模块函数已经以其他方式加载，（即另一个 chunk 导入过此模块，或包含模块的脚本被加载）。仍会返回 Promise，但是只有在客户端上已经有该 chunk 时才会成功解析。如果该模块不可用，则返回 rejected 状态的 Promise，且网络请求永远都不会执行。当需要的 chunks 始终在（嵌入在页面中的）初始请求中手动提供，而不是在应用程序导航在最初没有提供的模块导入的情况下触发，这对于通用渲染（SSR）是非常有用的。

webpackPrefetch: boolean

告诉浏览器将来可能需要该资源来进行某些导航跳转。

webpackPreload: boolean

预加载，告诉浏览器在当前导航期间可能需要该资源。4.6+才支持，如果是老版本 webpack，可以使用preload-webpack-plugin这种插件来实现预加载。

webpackInclude: string | RegExp

在导入解析（import resolution）过程中，用于匹配的正则表达式。只有匹配到的模块才会被打包。

webpackExclude: string | RegExp

在导入解析（import resolution）过程中，用于匹配的正则表达式。所有匹配到的模块都不会被打包。

webpackExports: string[]

告知 webpack 只构建指定出口的动态 import() 模块。它可以减小 chunk 的大小。从 webpack5开始可用。

作者：Millonario
链接：https://juejin.cn/post/7074895794406424583
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、路由懒加载

1、作用

提升用户体验，提升首屏组件加载速度，解决白屏问题

2、代码示例

2.1 未使用路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
        path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

2.2 使用路由懒加载

{
    path: '/Login',
    name: 'Login',
    component: () = >import( /* webpackChunkName: "Login" */  '@/view/Login')
}

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
    {
        path: '/',
      name: 'HelloWorld',
      // 方法一：vue异步组件实现
      // component: resolve => (require(['@/components/HelloWorld'], resolve))
      // 方法二：import方法(常用)
      component: () => import('@/components/HelloWorld')
    }
  ]
})

二、组价懒加载

1、代码示例

1.1 原本写法

<template>
  <div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>
<script>
  import HelloWorld from './HelloWorld'
  export default {
    components: {
      HelloWorld
    },
    data() {
      return {
        msg: 'this is Vue App'
      }
    }
  }
</script>

1.2 组件懒加载写法

<template>
  <div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>
<script>
export default {
  components: {
      // 方法一
    'HelloWorld': () => import('./HelloWorld'),
    // 方法二
    // HelloWorld': resolve => (['./HelloWorld'], resolve)
  }
}
</script>

组件懒加载这块感觉可以再严谨些，
单纯使用import()，只会对组件单独打包多一个js，
而加载依然是加载页面时，就会加载该组件了，所以要配合v-if等条件渲染才能有效懒加载，提高性能

三、动态导入js

index.js：点击按钮才异步加载lodash

// index.js
let btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    import(
    /* webpackChunkName: "lodash" */
    /* webpackMode: "lazy" */
    'lodash').then(
        _ => {
            var app = document.getElementById('app');
            app.textContent = _.join(['Index', 'Module', 'Loaded!'], ' ');
        }
    ).catch(
        err => {
            console.log('loading module error occur', err);
        }
    )
});

路由、组件懒加载