建站
咨詢
售后
建站咨詢
新聞中心
代碼捆綁
我很早就寫(xiě)過(guò)幾個(gè)關(guān)于 Javascript 腳本的捆綁的帖子，人們可能認(rèn)為我是瘋狂的熱衷于應(yīng)用捆綁，但是我認(rèn)為我是情不自禁的，因?yàn)樗欠浅Ｓ腥さ?-)。
成都創(chuàng)新互聯(lián)公司10多年企業(yè)網(wǎng)站制作服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及高端網(wǎng)站定制服務(wù),企業(yè)網(wǎng)站制作及推廣,對(duì)履帶攪拌車(chē)等多個(gè)行業(yè)擁有豐富建站經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。
有幾篇我寫(xiě)的文章是關(guān)于實(shí)現(xiàn)最小可能的捆綁的，其中我關(guān)注最多的是單文件的捆綁并且會(huì)嘗試將文件的大小變得很小。其中一個(gè)例子是我的 Angular 捆綁 郵件 。
代碼分割
這一直都不錯(cuò)，直到有一天遇到不能以單文件形式下載整個(gè)應(yīng)用的情況。有時(shí)候你必須在應(yīng)用程序中使用多個(gè)打包的腳本。
這就是需要對(duì)代碼進(jìn)行分割的地方。通過(guò)將應(yīng)用程序拆解成多個(gè)部分，你才可以按照用戶當(dāng)前操作提供應(yīng)用程序中相關(guān)的部分。
提到最小的單包，Webpack 通常***來(lái)處理文件大小，但這往往不是恰當(dāng)?shù)臅r(shí)機(jī)。Rollup 在這方面就好得多，但它對(duì)代碼分割的支持則較弱。
Webpack 各分塊文件的大小總和會(huì)超出單個(gè) Rollup 打包出來(lái)的文件的大小，但這在你的應(yīng)用中很可能不是什么問(wèn)題。
如果你根據(jù)需求來(lái)對(duì) Webpack 產(chǎn)生和各個(gè)包進(jìn)行懶加載，那么用戶最終下載的內(nèi)容可能只是完整 Rollup 生成的包文件的一部分。
最終，更小更有針對(duì)性的打包會(huì)比單包給用戶帶來(lái)更多好處。當(dāng)然如果你的應(yīng)用中沒(méi)什么機(jī)會(huì)用以懶加載，這些好處就不存在。
允許代碼分割
下面的章節(jié)中我會(huì)展示如何以最簡(jiǎn)單的方式配置代碼分割。我會(huì)把代碼分割為兩個(gè)應(yīng)用包以及一個(gè)包含公共代碼的庫(kù)包。
下面是源碼：
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 會(huì)被分割到兩個(gè)不同的應(yīng)用包中，公共的 LoggerService 會(huì)被提取到一個(gè)共享包中。
配置
我聽(tīng)某些開(kāi)發(fā)者說(shuō)，Webpack 配置起來(lái)很難。我認(rèn)為這是很多人一般不選擇用 Webpack 來(lái)打包的原因之一，這也確實(shí)是 Webpack 存在的問(wèn)題。新術(shù)語(yǔ)和模塊格式可能就是入門(mén)的難點(diǎn)所在，但我相信人們會(huì)很快克服它們。尤其是在人們認(rèn)識(shí)到優(yōu)化打包優(yōu)點(diǎn)的時(shí)候。
實(shí)際上對(duì) Webpack 進(jìn)行基本的配置是很簡(jiǎn)單的。我這個(gè)例子就是很基礎(chǔ)，你可以很容易對(duì)其進(jìn)行擴(kuò)展，進(jìn)行更高級(jí)的設(shè)置。
webpack-config.js
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',
})
]
}我的配置中首先定義了 entry.person 和 entry.car，它們是我那些包的分割點(diǎn)。有了這個(gè)配置，就可以生成兩個(gè)不同的應(yīng)用包了。包名由 [name].bundle.js 規(guī)則來(lái)生成，[name] 在這里是一個(gè)占位符，它會(huì)被替換為 “car” 和 “person”。
如果配置到這里就結(jié)束，最終會(huì)得到兩個(gè)包含完整應(yīng)用程序功能的包。這是因?yàn)閮蓚€(gè)包中會(huì)有一些重復(fù)的東西來(lái)自共用的 LoggerService。默認(rèn)情況下 LoggerSerivce 會(huì)被添加到兩個(gè)包中。
CommonsChunkPlugin 可以解決這個(gè)問(wèn)題。它會(huì)讓 Webpack 將所有包中共用的公共代碼拆分出來(lái)形成第三個(gè)包。
這個(gè)例子中的共享包非常簡(jiǎn)單，不過(guò)你可能不想在共享包中包含所有重復(fù)的代碼。注意到 minChunks 配置項(xiàng)，這個(gè)配置項(xiàng)允許你指定要加入共享包的代碼需要被重復(fù)使用的最小次數(shù)。
我把代碼發(fā)布在 Github 上，如果你有興趣可以取下來(lái)看看。
可以通過(guò)下面的 Webpack 命令來(lái)執(zhí)行示例：
webpack --config webpack.config.js --progress
如果你喜歡這篇文章，請(qǐng)推薦給你的朋友。
文章題目：如何在Webpack中執(zhí)行代碼分割
文章位置：http://fisionsoft.com.cn/article/cdeeegj.html
