Shulou(Shulou.com)06/02 Report--

This article mainly explains the "webpack package file is too large how to solve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "webpack package file is too large how to solve" it!

Webpack packages all our files into a JS file, so that even if you are a small project, the packaged file will be very large. Let's talk about how to optimize from many aspects.

Remove unnecessary plug-ins

When you first started using webpack, the development environment and the production environment used the same webpack configuration file, which caused the JS file packaged in the production environment to contain a lot of unnecessary plug-ins, such as

HotModuleReplacementPlugin, NoErrorsPlugin

Copy the code

No matter what optimization method is used at this time, it doesn't have much effect. So, if your packaged file is very large, check to see if these plug-ins are included.

Extract the third-party library

The core code of a library like react has 627 KB, so when packaged with our source code, it will definitely be very large. So you can set it in webpack

{

Entry: {

Bundle: 'app'

Vendor: ['react']

}

Plugins: {

New webpack.optimize.CommonsChunkPlugin ('vendor',' vendor.js')

}

}

In this way, there will be an extra vendor.js file after packaging, which will be introduced before we introduce our own code. For example, in index.html

In addition to this, you can also introduce third-party libraries by referencing external files, such as the following configuration

{

Externals: {

'react': 'React'

}

}

The key of the externals object is used for require, such as require ('react'). The value of the object represents how the object is accessed in global, in this case window.React. At this point, index.html becomes like this.

Of course, individuals prefer the first way.

At present, it is recommended to extract the third-party library by DLL.

Code compression

Webpack comes with a compression plug-in UglifyJsPlugin, which only needs to be introduced in the configuration file.

{

Plugins: [

New webpack.optimize.UglifyJsPlugin ({

Compress: {

Warnings: false

}

})

]

}

With the addition of this plug-in, the compilation speed is significantly slower, so it is generally only enabled in a production environment.

In addition, gzip compression can be enabled on the server side, and the effect of optimization is more obvious.

Code segmentation

What is code segmentation? We know that generally loading a web page will load all the js code. But for web app, what we prefer is to load only the code of the current UI, and not load the parts that are not clicked.

It may seem troublesome, but it can be easily implemented through webpack's code split and with react router. For a specific example, take a look at react router's official example, huge apps. However, here is still to talk about the previous configuration of the pit.

Code split does not support ES6 module systems, so be careful when importing and exporting, especially exports. If you export components using ES6, no matter whether the import is using CommomJs or AMD, it will fail and will not report an error!

Of course, I stepped into this hole because I just used NodeJS, and I started with the style of ES6. In addition to this, it is also important to note that publicPath should be added to the webpack configuration file of the production environment

Output: {

Path: xxx

PublicPath: yyy

Filename: 'bundle.js'

}

Otherwise, webpack will make an error in the path when loading chunk.

Set up cach

For static files, if the contents of the file remain unchanged after the first acquisition, the browser can read the cache file directly. What if the cache setting is too long and the file needs to be updated? Well, using the MD5 of the file content as the file name is a good solution. Let's take a look at how webpack should be implemented.

Output: {

Path: xxx

PublicPath: yyy

Filename:'[name]-[chunkhash:6] .js'

}

The hash value is added to the packaged file name

Const bundler = webpack (config)

Bundler.run ((err, stats) = > {

Let assets = stats.toJson () .assets

Let name

For (let I = 0; I

{

If (err) {

Fs.mkdirSync (config.buildTemplatePath)

}

WriteTemplate (name)

})

})

Manually call the API of webpack, get the packaged file name, and update the html code through writeTemplate. The complete code pokes gitst.

In this way, we can set the cache of files to be very long without having to worry about updates.

Thank you for your reading, the above is the "webpack package file is too large how to solve" the content, after the study of this article, I believe you on the webpack package file is too large how to solve this problem has a deeper understanding, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.