This website requires JavaScript.
en
hb

手摸手教你如何做微前端的webpak4配置优化.md

把公司单页应用webpack3升级到了微前端标准应用webpack4,顺手出个教程岂不美哉

主要优化项

thread-loader

把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker【worker pool】 池里运行,一个worker 就是一个nodeJS 进程【node.js proces】,每个单独进程处理时间上限为600ms,各个进程的数据交换也会限制在这个时间内。 thread-loader 使用起来也非常简单,只要把 thread-loader 放置在其他 loader 之前, 那 thread-loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。 推荐只对耗时多的loader配置此loader

  {
  test: /\.(js?|tsx?|ts?)$/,
  include: [
      path.resolve(rootPath, './src'),
      path.resolve(rootPath, './shared'),
      path.resolve(rootPath, './node_modules/@youzan/mei-components/src'),
  ],
  use: devMode
      ? [
            'cache-loader',
            'thread-loader',
            {
                loader: 'babel-loader',
                options: {
                    presets: babelConfig.presets,
                    plugins: babelConfig.plugins,
                },
            },
        ]
      : [
            'thread-loader',
            {
                loader: 'babel-loader',
                options: {
                    presets: babelConfig.presets,
                    plugins: babelConfig.plugins,
                },
            },
        ],
  }

官方上说每个 worker 大概都要花费 600ms ,所以官方为了防止启动 worker 时的高延迟,提供了对 worker 池的优化:预热


const threadLoader = require('thread-loader');
threadLoader.warmup({}, ['babel-loader']);

压缩js

terser-webpack-plugin

官方推荐插件,一个用于 ES6+ 的 JavaScript 解析器、mangler/compressor(压缩器)工具包。


minimizer: [
            new TerserPlugin({
                sourceMap: true,
                parallel: true,
                extractComments: false,
                terserOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
            new OptimizeCSSAssetsPlugin(),
        ]

css优化项

css开发环境生产环境区分

开发环境style-loader比MiniCssExtractPlugin更快

{
                    test: /\.(sa|sc|c)ss$/,
                    include: [
                        path.resolve(rootPath, './src'),
                        path.resolve(rootPath, './shared'),
                        path.resolve(rootPath, './node_modules/@youzan'),
                        path.resolve(rootPath, './node_modules/zent'),
                        path.resolve(rootPath, './node_modules/@zent/compat'),
                        path.resolve(rootPath, './node_modules/cropperjs'),
                        /node_modules\/zan*/,
                    ],
                    use: [
                        devMode ? 'style-loader' : MiniCssExtractPlugin.loader,