ant-design-vue按需加载的坑

2024-02-21 14:49:31

在使用 ant-design-vue 组件库构建前端应用时，我们常常会利用其提供的按需加载功能来优化页面性能，提升用户体验。然而，在 less 3.0 及其之后的版本中，默认开启的 javascriptEnabled 属性却可能成为按需加载的绊脚石，导致一些意想不到的问题。

ant-design-vue 的样式是基于 Less 预处理器构建的。Less 作为一种 CSS 预处理器，可以帮助我们更便捷地编写和管理样式代码。而 javascriptEnabled 属性，顾名思义，就是允许 Less 使用 JavaScript 代码进行动态样式生成。虽然这为样式编写提供了更大的灵活性，但同时也带来了潜在的风险。

当 javascriptEnabled 属性开启时，Less 可以在编译过程中执行 JavaScript 代码，这可能导致生成的 CSS 文件体积膨胀，进而影响页面加载速度。更重要的是，这种动态生成的机制可能会与按需加载的策略产生冲突，导致组件样式无法正确加载，最终影响页面的正常显示。

具体来说，ant-design-vue 的按需加载机制是通过 webpack 等构建工具，将每个组件的样式单独打包成一个文件。当页面需要某个组件时，才会加载对应的样式文件。然而，如果 Less 在编译过程中使用了 JavaScript 代码动态生成样式，那么这些样式就无法被 webpack 正确识别和打包，从而导致按需加载失效。

为了解决这个问题，我们需要在项目中显式地关闭 javascriptEnabled 属性。这可以通过修改 webpack 的配置文件来实现。

以 webpack 为例，我们可以在 less-loader 的配置选项中，将 javascriptEnabled 设置为 false：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
            options: {
              javascriptEnabled: false 
            }
          }
        ]
      }
    ]
  }
};

通过这样的配置，我们就可以禁用 Less 的 JavaScript 功能，从而避免它对按需加载机制的干扰。

当然，关闭 javascriptEnabled 属性也意味着我们无法在 Less 代码中使用 JavaScript 相关的特性。如果你的项目中确实需要用到这些特性，那么你需要权衡利弊，选择合适的解决方案。例如，你可以将需要使用 JavaScript 特性的样式代码单独提取出来，不使用按需加载的方式进行处理。

总而言之，在使用 ant-design-vue 的按需加载功能时，我们需要注意 Less 的 javascriptEnabled 属性。如果你的项目中没有用到 Less 的 JavaScript 功能，那么建议将其关闭，以确保按需加载能够正常工作，提升页面性能。