javascript - 有没有办法结合 Webpack 模块来减小文件大小？

Question

我正在使用 CSS 模块，所以 Webpack 生成的很多模块看起来像这样:

    124: function(t, e, n) {
        t.exports = {
            textarea: "TextareaStyles__textarea"
        }
    },

然后，在 React 中使用:

return t(r, {
    onInput: o(this, "str"),
    class: a.a.textarea
})

如果 Webpack 将 CSS 模块和 React 组件合并到一个模块中，它会更小。然后，Uglify/Terser 可能只是将其内联:

return t(r, {
    onInput: o(this, "str"),
    class: "TextareaStyles__textarea"
})

这可能吗？

Answer 1

我分享了我在生产中使用的 WEBPACK 配置，它使用 PURGECSS 删除未使用的类，就像您可以包含未编译的选择器一样。

const path = require('path');
const merge = require('webpack-merge');
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const TerserPlugin = require('terser-webpack-plugin');
const common = require('./webpack.common.js');

const PATHS = {
  src: path.join(__dirname, 'src'),
};

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  optimization: {
    minimizer: [new TerserPlugin({
      sourceMap: true,
    })],
  },
  plugins: [
    require('cssnano')({ preset: 'default' }),
    new PurgecssPlugin({
      whitelistPatternsChildren: [
        // Here we include a regex to force the included values
        /^btn-/i,
      ],
      paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
});

希望对您有所帮助。