生产环境webpack.config.js性能优化配置

最新推荐文章于 2024-09-19 21:09:22 发布

原创

最新推荐文章于 2024-09-19 21:09:22 发布 · 694 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文详细介绍了如何通过Webpack配置优化打包构建速度，如修改loader处理、启用babel缓存、多进程打包，以及如何通过externals和DLL技术减少重复打包。此外，还探讨了代码运行性能的优化策略，如文件资源缓存、treeshaking、code splitting和懒加载预加载，以及PWA在提升用户体验中的应用。

生产环境webpack.config.js性能优化配置

1.优化打包构建速度

1.修改loader处理

当处理一个文件的时候，会去匹配所有的loader，但是往往一个文件只需要一个loader处理，其他剩余的loader没必要花时间去匹配处理，此时就可以使用oneOf选项

使用：需要处理的loader放在oneOf数组中：

 module: {
   
   
    rules: [
      {
   
   
        oneOf: [
          {
   
   
            // css处理
            test: /\.css$/,
            use: [...commonCssPlugin]
          },
          {
   
   
            // js语法检查
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
   
   
              fix: true
            }
          },
          {
   
   
            // js兼容性处理
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
   
   
              presets: [
                [
                  '@babel/preset-env',
                  {
   
   
                    useBuiltIns: 'usage',
                    corejs: {
   
   
                      version: 3
                    },
                    targets: {
   
   
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      }
    ]
  },

此语法的意思：当匹配到符合的文件类型，则使用该配置，后续的loader不再遍历

但是需要注意的是：不能有两个配置处理同一类型文件

以上述代码为例，有两个配置处理js文件，这是不允许的，但是不得不需要两个配置处理js文件，做法：将需要先处理的配置提取到oneOf所处对象之外，和之前写loader配置一样即可：

 module: {
   
   
    rules: [
         {
   
   
            // js语法检查
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'eslint-loader',
            options: {
   
   
              fix: true
            }
          },
      {
   
   
        oneOf: [
          {
   
   
            // js兼容性处理
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
   
   
              presets: [
                [
                  '@babel/preset-env',
                  {
   
   
                    useBuiltIns: 'usage',
                    corejs: {
   
   
                      version: 3
                    },
                    targets: {
   
   
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }

最低0.47元/天解锁文章