zoukankan      html  css  js  c++  java
  • [Webpack 2] Optimize React size and performance with Webpack production plugins

    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,
            },
          })),
        ])
  • 相关阅读:
    JavaScript 数组进行拼接的函数
    Scrum工件
    Scrum角色
    Scrum
    看板kanban
    敏捷估算
    用户故事地图
    用户故事
    用户画像
    AARRR模型
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5615677.html
Copyright © 2011-2022 走看看