3

我正在使用Vue.js和Webpack开发单页 Web 应用程序。最近我看到这篇文章来缩短 css 类。我能够从 css 文件中缩短 css 类。但我无法从 Html 页面缩短相同的类。

以下是我从webpack.config.js的摘录：

module.exports = {
  context,
  entry: './index.js',
  module: {
    loaders: [
      {
        include: path.resolve(__dirname, './src'),
        use:[
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              getLocalIdent: (context, localIdentName, localName) => {
                return generateScopedName(localName, context.resourcePath);
              }
            }
          }
        ],
        test: /\.css$/
      },
      {
        include: path.resolve(__dirname, './src'),
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-react-jsx',
            [
              'react-css-modules',
              {
                context: context,
                generateScopedName: '[path]___[name]__[local]___[hash:base64:5]',
                webpackHotModuleReloading: false
              }
            ]
          ]
        },
        test: /\.js$/
      }
    ]
  },
  output: {
    filename: '[name].js'
  },
  stats: 'minimal'
};
4

1 回答 1

1

你应该做3件事：

1> 替换css className并记录一个map Record<beforeMinified, afterMinified>;

2> 遍历 html 和 jsx 获取静态类名和动态“类名”，其中包括类名属性中的表达式和模板语法；

3> 对于vue模板、html和js中的动态className，你应该用vue的方式解析并替换它们，这是最困难的。

此外，我正在通过上述方法缩短微信小程序类名。但是动态语法部分是最重要也是最困难的部分，因为在编写编译逻辑时需要考虑很多情况。和coder应该非常熟悉vue编译规则的流程。但是，由于 vue 和微信小程序一样是一个动态的模板结构，我们很难摆脱猴子打补丁的方式。您可以看到 vue-cli 的相同问题（https://github.com/vuejs/vue-cli/issues/3884）。

但是，我发现可能还有其他方法可以解决这个问题。使用 css 模块和常规 css 类名编码规则，您可以轻松做到这一点。

于 2021-10-14T12:56:33.343 回答