提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Webpack 2] Optimize React size and performance with Webpack production plugins

webpackReact and with size performance plugins production
2023-09-14 08:59:19 时间

You can fine tune several webpack plugins to make your bundle as small as it can be for your specific application. However there are a few things you can do for pretty much every application to make it smaller and run faster. In this lesson we’ll combine several webpack plugins to optimize things for a React application (this is also applicable for non-React applications as well).

 

First we need to modify the prod scripts from:

"build:prod": "webpack --env.prod -p",

to:

"build:prod": "webpack --env.prod",

 

Help methods:

    plugins: removeEmpty([
      // doesn't save anything in this small app. npm@3 mostly takes care of this
      ifProd(new webpack.optimize.DedupePlugin()),
      // saves a couple of kBs
      ifProd(new webpack.LoaderOptionsPlugin({  //Loader plugin only works in webpack 2
        minimize: true,
        debug: false,
        quiet: true,
      })),
      // saves 65 kB with Uglify!! Saves 38 kB without
      ifProd(new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
      })),
      // saves 711 kB!!
      ifProd(new webpack.optimize.UglifyJsPlugin({
        compress: {
          screw_ie8: true, // eslint-disable-line
          warnings: false,
        },
      })),
    ])

 

相关文章