Solve webpack package file size is too large

webpack all our files are packaged into a JS file, so even if you are a small project, the file will be very large package. Here under terms of how to optimize in many ways.

Remove unnecessary plug-ins

Beginning with webpack time, development and production environments use the same webpack profile, resulting in a production environment packed JS file contains a lot of unnecessary plug-ins, such as HotModuleReplacementPlugin, NoErrorsPlugin... this time with no matter what optimizations , did not have much effect. So, if you file after the package is very large, the next check is not included plug-ins.

Extraction of third-party libraries

Like the core code react this library will have 627 KB, and so our source code in packaged together, the volume will certainly be great. It is possible to set the webpack

{
  entry: {
   bundle: 'app'
    vendor: ['react']
  }

  plugins: {
    new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
  }
}

 

After this package will be more of a vendor.jsfile, before and after the introduction of our own code, you have to the introduction of this document. For example, in index.htmlthe

 <script src="/build/vendor.js"></script> <script src="/build/bundle.js"></script> 

In addition to this embodiment, third-party libraries may also be introduced by way of reference to an external file, like the following configuration

{
  externals: {
     'react': 'React' } } 

externalsThe key target is to requireuse when, for example require('react'), value representation of the object is how to access the object in the global, there is window.React. This time index.htmlbecomes as follows

<script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script> <script src="/build/bundle.js"></script> 

Of course, personally recommend the first approach。

Currently recommended DLL extract of third-party libraries manner.

Code compression

webpack comes with a compression plugin UglifyJsPlugin , only need to be introduced to the configuration file.

{
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

 

After adding this plugin, compilation speed is significantly slower, it is generally only in a production environment is enabled.

Further, the server can turn gzip compression, optimization is more effective.

Code division

What is the code split them up? We know that the general load a web page will put all the js code are loaded down. But for the web app, the more we want it is to load only the current code of the UI, not clicked partially loaded.

Looks like very troublesome, but by webpack the code split and fit react router can be easily achieved. Specific examples may look official react router exemplary Huge Apps . But this was still speaking to configure stepped before the next pit.

code splitIt is not supported by the module system of the ES6, so be careful in importing and exporting of time, especially in export. If you export component when using ES6 way, at this time whether it is CommomJs import or AMD, it will fail, but also without error!

Of course, I will step on the pit but also because I just use NodeJS, and the entry is to use a ES6 style. In addition to this, another thing we should pay attention, in webpack profile production environment, to addpublicPath

output: {
    path: xxx,
    publicPath: yyy,
    filename: 'bundle.js'
}

 

Otherwise, webpack when loading chunk, the path will be wrong.

Setting Cache

Before you begin this section, you can look at the god of article: big companies how to develop and deploy front-end code .

For static files, after the first acquisition, the document did not change, browser cache files can be directly read. What if the cache is set too long, the file you want to update how to do it? Ah to MD5 file contents as the file name is a good solution. With webpack should look at how to achieve

output: {
    path: xxx,
    publicPath: yyy,
    filename: '[name]-[chunkhash:6].js'
}

 

After the package file name added to hash value

const bundler = webpack(config)

bundler.run((err, stats) => {
  let assets = stats.toJson().assets
  let name

  for (let i = 0; i < assets.length; i++) {
    if (assets[i].name.startsWith('main')) {
      name = assets[i].name
      break
    }
  }

  fs.stat(config.buildTemplatePath, (err, stats) => {
    if (err) {
      fs.mkdirSync(config.buildTemplatePath)
    }

    writeTemplate(name)
  })
})

 

Webpack manually invoke the API, obtain the file name of the package, by writeTemplateupdating html code. The complete code Mengchuo gitst .

This way, we can put the cache file is set very long, and do not worry about update problems.

webpack dll

The server is turned GZIP
webpack2 support tree shaking. You can delete the code is not referenced by the tree shaking.
The ultimate solution is to support the server side rendering
Author: clinyong
link: https: //www.jianshu.com/p/a64735eb0e2b
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.