reactjs - 如何使用 Webpack 和 Code Split 创建 React 小部件库

Question

我正在尝试创建一个小部件库，对于小部件，我的意思是一个内部具有完整工作流逻辑的反应组件。在我的第一个版本中，一切正常为 0k，但由于执行 JS 包的时间太长，谷歌洞察力给我的性能评估很差，并建议使用拆分代码。当我使用动态导入将拆分代码添加到我的小部件时，我可以看到很多块，如果 Webpack 生成的测试 de HTML 页面我得到了更好的性能评估，但是当我尝试在其他项目中使用这个小部件时，我得到了一个错误喜欢

我的 Webpack 配置是：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const path = require('path');

const entry = './src/index.js';

const jsClientConfig = {
  entry,
  mode: 'production',
  target: 'web',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/',
    libraryTarget: 'umd',
    library: 'my-widgets-lib',
    globalObject: 'this',
    clean: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]/index.css',
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', { targets: 'defaults' }]],
            plugins: [
              '@babel/proposal-class-properties',
              [
                'styled-components',
                {
                  pure: true,
                  ssr: true,
                  displayName: true,
                },
              ],
              'syntax-dynamic-import',
              '@babel/transform-react-jsx',
              '@babel/transform-runtime',
            ],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false,
          },
        },
      }),
    ],
    moduleIds: 'deterministic',
  },
};
module.exports = [jsClientConfig];

标签： reactjswebpack