怎么在Webpack中执行代码分割

这篇文章主要介绍“怎么在Webpack中执行代码分割”，在日常操作中，相信很多人在怎么在Webpack中执行代码分割问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么在Webpack中执行代码分割”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

代码分割

这一直都不错，直到有一天遇到不能以单文件形式下载整个应用的情况。有时候你必须在应用程序中使用多个打包的脚本。

这就是需要对代码进行分割的地方。通过将应用程序拆解成多个部分，你才可以按照用户当前操作提供应用程序中相关的部分。

提到最小的单包，Webpack 通常***来处理文件大小，但这往往不是恰当的时机。Rollup 在这方面就好得多，但它对代码分割的支持则较弱。

Webpack 各分块文件的大小总和会超出单个 Rollup 打包出来的文件的大小，但这在你的应用中很可能不是什么问题。

如果你根据需求来对 Webpack 产生和各个包进行懒加载，那么用户最终下载的内容可能只是完整 Rollup 生成的包文件的一部分。

最终，更小更有针对性的打包会比单包给用户带来更多好处。当然如果你的应用中没什么机会用以懒加载，这些好处就不存在。

允许代码分割

下面的章节中我会展示如何以最简单的方式配置代码分割。我会把代码分割为两个应用包以及一个包含公共代码的库包。

下面是源码：

car-service.js

import { LoggerService } from './logger-service';

export class CarService {

  constructor() {    this.logger = new LoggerService();
  }

  getCar() {    this.logger.logMessage('getting car');    return 'BMW';
  }
}

person-service.js

import { LoggerService } from './logger-service';

export class PersonService {

  constructor() {    this.logger = new LoggerService();
  }

  getPerson() {    this.logger.logMessage('getting person');    return 'Joe Smith';
  }
}

logger-service.js

export class LoggerService {
  logMessage(msg) {
    console.log(msg);
  }
}

CarService 和 PersonService 会被分割到两个不同的应用包中，公共的 LoggerService 会被提取到一个共享包中。

配置

我听某些开发者说，Webpack 配置起来很难。我认为这是很多人一般不选择用 Webpack 来打包的原因之一，这也确实是  Webpack 存在的问题。新术语和模块格式可能就是入门的难点所在，但我相信人们会很快克服它们。尤其是在人们认识到优化打包优点的时候。

实际上对 Webpack 进行基本的配置是很简单的。我这个例子就是很基础，你可以很容易对其进行扩展，进行更高级的设置。

webpack-config.js

var path = require('path');const webpack = require('webpack');

module.exports = {
  entry : {
    person: './class="lazy" data-src/code-splitting-webpack/person-service.js',
    car: './class="lazy" data-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 和  entry.car，它们是我那些包的分割点。有了这个配置，就可以生成两个不同的应用包了。包名由 [name].bundle.js  规则来生成，[name] 在这里是一个占位符，它会被替换为 “car” 和 “person”。

如果配置到这里就结束，最终会得到两个包含完整应用程序功能的包。这是因为两个包中会有一些重复的东西来自共用的 LoggerService。默认情况下 LoggerSerivce 会被添加到两个包中。

CommonsChunkPlugin 可以解决这个问题。它会让 Webpack 将所有包中共用的公共代码拆分出来形成第三个包。

这个例子中的共享包非常简单，不过你可能不想在共享包中包含所有重复的代码。注意到 minChunks 配置项，这个配置项允许你指定要加入共享包的代码需要被重复使用的最小次数。

我把代码发布在      Github 上，如果你有兴趣可以取下来看看。

可以通过下面的 Webpack 命令来执行示例：

webpack --config webpack.config.js --progress

到此，关于“怎么在Webpack中执行代码分割”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！