如何在Webpack中执行代码分割

代码绑缚

我很早就写过几个关于 Javascript 脚本的绑缚的帖子，人们可能认为我是猖狂的热衷于应用绑缚，然则我认为我是不由自立的，因为它是异常有趣的:-)。

有几篇我写的文┞仿是关于实现最小可能的绑缚的，个中我存眷最多的是单文件的绑缚并且会测验测验将文件的大年夜小变得很小。个一一个例子是我的 Angular 绑缚邮件。

代码瓜分

这一向都不错，直到有一天碰到不克不及以单文件情势下载全部应用的情况。有时刻你必须在应用法度榜样中应用多个打包的脚本。

这就是须要对代码进行瓜分的处所。经由过程将应用法度榜样拆解成多个部分，你才可以按照用户当前操作供给给用法度榜样中相干的部分。

提到最小的单包，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 --config webpack.config.js --progress

我听某些开辟者说，Webpack 设备起来很难。我认为这是很多人一般不选择用 Webpack 来打包的原因之一，这也确切是 Webpack 存在的问题。新术语和模块格局可能就是入门的可贵地点，但我信赖人们会很快克服它们。尤其是在人们熟悉到优化打包长处的时刻。

var 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',    })  ]}

实际上对 Webpack 进行根本的设备是很简单的。我这个例子就是很基本，你可以很轻易对其进行扩大，进行更高等的设置。

webpack-config.js

如不雅设备到这里就停止，最终会获得两个包含完全应用法度榜样功能的包。这是因为两个包中会有一些反复的器械来自共用的 LoggerService。默认情况下 LoggerSerivce 会被添加到两个包中。

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

这个例子中的共享包异常简单，不过你可能不想在共享包中包含所有反复的代码。留意到 minChunks 设备项，这个设备项许可你指定要参加共享包的代码须要被反复应用的最小次数。

我的设备中起首定义了 entry.person 和 entry.car，它们是我那些包的瓜分点。有了这个设备，就可以生成两个不合的应用包了。包名由 [name].bundle.js 规矩来生成，[name] 在这里是一个占位符，它会被调换为 “car” 和 “person”。

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

可以经由过程下面的 Webpack 敕令来履行示例：

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

如不雅你爱好这篇文┞仿，请推荐给你的同伙。

【编辑推荐】

详解前端模块化对象-webpack
应用webpack治理多页应用技能总结

【义务编辑：seeker TEL：（010）68476606】

　　推荐阅读

　　谷歌新的AI工具听起来耳熟很像苹果批处理工具

为了保护隐私，谷歌正乞助于“结合进修”技巧，以赞助其人工智能（AI）算法变得更个性化，更合实用户应用。正如谷歌在博客文┞仿中宣布的那样，结合进修“使让手机可以或许>>>详细阅读

本文标题：如何在Webpack中执行代码分割

地址：http://www.17bianji.com/lsqh/34762.html

1/2 1