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

This article mainly introduces "how to perform code segmentation in Webpack". In daily operation, I believe many people have doubts about how to implement code segmentation in Webpack. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to implement code segmentation in Webpack". Next, please follow the editor to study!

Code segmentation

This was good until one day it was not possible to download the entire application as a single file. Sometimes you have to use multiple packaged scripts in your application.

This is where the code needs to be segmented. By breaking the application into multiple parts, you can provide the relevant parts of the application according to the user's current actions.

When it comes to the smallest single package, Webpack usually deals with file size, but this is often not the right time. Rollup is much better in this respect, but its support for code segmentation is weaker.

The sum of Webpack chunk files will exceed the size of a single Rollup package, but this is probably not a problem in your application.

If you lazily load the Webpack generation and individual packages according to your requirements, the final download may only be part of the package file generated by the complete Rollup.

In the end, smaller and more targeted packaging will bring more benefits to users than a single package. Of course, if there is little opportunity for lazy loading in your application, these benefits do not exist.

Allow code segmentation

In the following sections, I will show you how to configure code segmentation in the easiest way. I will split the code into two application packages and a library package that contains common code.

Here is the source code:

Car-service.jsimport {LoggerService} from'. / logger-service';export class CarService {constructor () {this.logger = new LoggerService ();} getCar () {this.logger.logMessage ('getting car'); return' BMW';}} person-service.jsimport {LoggerService} from'. / logger-service';export class PersonService {constructor () {this.logger = new LoggerService ();} getPerson () {this.logger.logMessage ('getting person') Return 'Joe Smith';}} logger-service.jsexport class LoggerService {logMessage (msg) {console.log (msg);}}

CarService and PersonService will be split into two different application packages, and the common LoggerService will be extracted into a shared package.

Configuration

I have heard from some developers that Webpack is difficult to configure. I think this is one of the reasons why many people generally do not choose to package with Webpack, and this is indeed a problem with Webpack. New terms and module formats may be the difficulties of getting started, but I'm sure people will overcome them soon. Especially when people realize the advantages of optimized packaging.

In fact, the basic configuration of Webpack is very simple. My example is very basic, and you can easily extend it to more advanced settings.

Webpack-config.jsvar path = require ('path'); const webpack = require (' webpack') Module.exports = {entry: {person:'. / src/code-splitting-webpack/person-service.js', car:'. / src/code-splitting-webpack/car-service.js'}, output: {filename:'[name] .bundle.js', path: path.resolve (_ _ dirname,'.. / dist')}, plugins: [new webpack.optimize.CommonsChunkPlugin ({name: 'lib') MinChunks: 2, filename:'[name] .js',})]}

Entry.person and entry.car are first defined in my configuration, which are the split points for my packages. With this configuration, you can generate two different application packages. The package name is generated by the [name] .bundle.js rule, where [name] is a placeholder, which is replaced with "car" and "person".

If the configuration ends here, you end up with two packages that contain the full application functionality. This is because there will be some repetition in the two packages from the shared LoggerService. By default, LoggerSerivce is added to both packages.

CommonsChunkPlugin can solve this problem. It allows Webpack to split the common code shared in all packages into a third package.

The shared package in this example is very simple, but you may not want to include all the duplicate code in the shared package. Note the minChunks configuration item, which allows you to specify the minimum number of times the code to be added to the shared package needs to be reused.

I posted the code on Github. If you are interested, you can take it down and have a look.

You can execute the example with the following Webpack command:

Webpack-- config webpack.config.js-- progress at this point, the study on "how to perform code segmentation in Webpack" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.