使用 Laravel Mix 进行动态导入

在最新的 Laravel Mix (4.0.16) 版本中，对 动态导入 的支持已默认提供。动态导入是一种代码拆分的策略，可以让我们轻松地将 JavaScript 组件、包和其他模块拆分成单独的文件。如果一个项目使用多个包或包含大量 Vue.js 或 React 组件，很容易导致 1MB 以上的 JavaScript 包。如果用户使用的是缓慢的网络连接，这可能会花费很长时间才能下载。

代码拆分允许我们提供更小的初始包（以 KB 为单位而不是 MB），并显著提高这些用户的加载时间。然后，Webpack 将在用户访问不同页面时自动下载所需的任何额外文件。

#配置动态导入

要开始使用 Laravel Mix 进行动态导入，首先确保您使用的是 4.0.16 或更高版本。然后，如果还没有，请在项目的根目录中添加一个 .babelrc 文件。在文件中，将 @babel/plugin-syntax-dynamic-import 插件添加到“plugins”数组中。这将通过 Laravel Mix 中已包含的插件启用动态导入语法。

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

或者，如果您想在 webpack.mix.js 文件中配置插件，您也可以在那里添加。

mix.babelConfig({
  plugins: ['@babel/plugin-syntax-dynamic-import'],
});

#使用动态导入

要告诉 Webpack 您想要动态导入文件，您需要使用稍微不同的语法。下面我将演示标准导入和动态导入的区别。

// Standard import
import StandardComponent from './components/ExampleComponent.vue';
 
// Dynamic import
const DynamicallyImportedComponent =
        () => import('./components/ExampleComponent.vue');

默认情况下，Webpack 会将动态导入的文件拆分成块，并分别命名为 0.js、1.js 等。Laravel Mix 被配置为使用块名称、内容的哈希值，以及 .js 扩展名来命名文件。如果您想为文件配置块名称，您需要在导入语句中添加一个“魔法”注释来告诉 Webpack 您要使用的名称。下面，我告诉 Webpack 我想使用 dynamically-imported-component 作为名称，这将生成一个 dynamically-imported-component.[hash].js 文件。

const DynamicallyImportedComponent =
        () => import(/* webpackChunkName: "dynamically-imported-component" */ './components/ExampleComponent.vue');

#将动态导入与 Vue Router 一起使用

如果您在项目中使用 Vue Router，可以使用动态导入将每个页面拆分成单独的文件，操作非常简单。在配置路由时，可以使用动态导入语法，而不是 require() 或标准导入语法，Webpack 会处理其他一切。

const routes = [
  {
    name: 'dashboard',
    path: '/dashboard',
    component:
      () => import(/* webpackChunkName: "dashboard" */ './pages/Dashboard.vue'),
  },
];

#结论

总的来说，动态导入是一个非常实用的工具。它们易于使用，可以为您的用户带来一些实际益处，特别是在大型应用程序中。我建议您在正在进行的项目中或下一个项目中尝试使用它们！