webpack构建性能优化

最新推荐文章于 2024-09-06 11:59:38 发布

woollllll

最新推荐文章于 2024-09-06 11:59:38 发布

阅读量756

点赞数

CC 4.0 BY-SA版权

分类专栏：前端优化文章标签： webpack 性能优化前端开发

本文链接：https://blog.youkuaiyun.com/zhaozjc112/article/details/77572058

前端优化专栏收录该内容

2 篇文章

订阅专栏

针对webpack打包时间过长的问题，采用UglifyJsParallelPlugin进行多线程压缩和webpack.DllPlugin预打包动态依赖库，显著提升构建效率。通过单独配置webpack.dll.config.js并引入manifest.json，再借助add-asset-html-webpack-plugin注入页面，有效缩短打包时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目之前一直用webpack自带 UglifyJsPlugin 压缩，随着项目扩大，打包时间越来越长，于是着手优化缩短打包时间

方案一

替换为UglifyJsParallelPlugin插件，UglifyJsParallelPlugin支持多线程压缩，替换后打包时间缩短了3分之1

方式

1 安装 UglifyJsParallelPlugin插件

    npm install --save-dev webpack-uglify-parallel

2 使用

    var UglifyJsParallelPlugin = require('webpack-uglify-parallel');

    new UglifyJsParallelPlugin({ 
        workers: os.cpus().length,
        compress: {
            warnings: false
        },
        output: {
            comments: false
        },
        sourceMap: true
    })

方案二
利用webpack.DllPlugin 预打包，生成动态依赖库对重点内容不经常修改的库预打包生成依赖关系避免二次打包

1单独创建webpack.dll.config.js

    var webpack = require('webpack');
    var path = require('path');

    var vendors = [
      'react',
      'react-dom'
    ];

    var plugin = [
        new webpack.DllPlugin({
          path: path.join(__dirname, '/dll/manifest.json'),
          name: '[name]',
          context: __dirname
        }),
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          },
          output: {
            comments: false
          }
        })
    ];

    module.exports = {
      devtool: '#source-map',
      entry: {
        "vendors": vendors
      },
      output: {
        path: path.join(__dirname, '/dll'),
        filename: '[name].js',
        library: '[name]',
        libraryTarget: 'umd',
        umdNamedDefine: true
      },
      plugins: plugin
    };

2 执行webpack -p –progress –config webpack.dll.config.js 预打包

3 在webpack.config.js中引入打包生成的manifest.json

 var manifest = require('./dll/manifest.json');

  plugins: [
      new webpack.DllReferencePlugin({
        manifest,
      }),
]

4 在页面中引入也编译生成的依赖库 vendors.js
推荐使用 add-asset-html-webpack-plugin插件动态注入

var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
    new AddAssetHtmlPlugin([
      {
        filepath: xxxxx,
        outputPath: xxxxx,
        publicPath: xxxxx
      }
    ])

通过多线程压缩和预打包，打包时间大大缩短。

参考文章：http://engineering.invisionapp.com/post/optimizing-webpack/