Webpack按需加載打包c(diǎn)hunk命名的方法

前言

最近，遇到復(fù)雜h6頁(yè)面開(kāi)發(fā)，為了優(yōu)化H5首屏加載速度，想到使用按需加載的方式，減少首次加載的JavaScript文件體積，于是將處理過(guò)程在這里記錄一下，涉及到的主要是以下三點(diǎn)：

• 使用Webpack如何做按需加載
• filename和chunkFilename的區(qū)別
• 如何命名chunk的名稱(webpackChunkName)

1 使用Webpack如何做按需加載

大家都知道Webpack是現(xiàn)在流行的前端打包編譯工具，通過(guò)模塊之間的依賴關(guān)系，將代碼打包組織到一起。Webpack目前已經(jīng)到v4.x，不同版本版支持按需加載的方式不同，主要有兩種：

• webpack1.x 中提供了 require.ensure()
• webpack2.x 中提供了 import()

require.ensure()

// 舉例
require.ensure([], function(require){
 require('b');
});

webpack 在編譯時(shí)，會(huì)靜態(tài)地解析代碼中的 require.ensure()，同時(shí)將[模塊b] 添加到一個(gè)分開(kāi)的 chunk 當(dāng)中。這個(gè)新的 chunk 會(huì)被 webpack 通過(guò) jsonp 來(lái)按需加載。

為什么說(shuō)到是靜態(tài)分析，我們可以看到下面的require.ensure語(yǔ)法，第二個(gè)參數(shù)callback就是一個(gè)回調(diào)函數(shù)。其中需要注意的是，這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)require，通過(guò)這個(gè)require就可以在回調(diào)函數(shù)內(nèi)按需引入其他模塊。==值得注意的是，雖然這個(gè)require是回調(diào)函數(shù)的參數(shù)"module"，理論上可以換其他名稱，但是實(shí)際上是不能換的，否則webpack就無(wú)法靜態(tài)分析的時(shí)候處理它。==

require.ensure(
 dependencies: String[], 
 callback: function(require){
  require('module');
 }, 
 errorCallback: function(error){}, 
 chunkName: String
)

import()

要注意的是import() 函數(shù)不同于import命令，import 是 ECMAScript 6 Module 的語(yǔ)法，import 是靜態(tài)執(zhí)行，這里不多說(shuō)，可以去看import 命令。

import(specifier)

上面代碼中，import函數(shù)的參數(shù)specifier，指定所要加載的模塊的位置，而且==specifier可以是一個(gè)方法，動(dòng)態(tài)的生成模塊路徑==。import命令能夠接受什么參數(shù)，import()函數(shù)就能接受什么參數(shù)，兩者區(qū)別主要是后者為動(dòng)態(tài)加載。

import()函數(shù)是 ECMAScript Stage 3 草案階段的語(yǔ)法；用于完成動(dòng)態(tài)加載即運(yùn)行時(shí)加載，可以用在任何地方。import()函數(shù) 返回的是一個(gè) Promise。類似于 CommonJs 的 require() ，區(qū)別主要是前者是異步加載，后者是同步加載。

import的應(yīng)用場(chǎng)景有以下三種 (參考自ECMAScript 6 入門(mén)):

• 按需加載。import()可以在需要的時(shí)候，再加載某個(gè)模塊
• 條件加載。import()可以放在if代碼塊，根據(jù)不同的情況，加載不同的模塊。
• 動(dòng)態(tài)的模塊路徑。import()允許模塊路徑動(dòng)態(tài)生成。

用法大致如下：

import('./myModule.js')
 .then(myModule => {
  console.log(myModule.default);
 });

小結(jié)

目前我們用的比較多的是import來(lái)做按需加載，模塊路徑可以動(dòng)態(tài)生成，更適合現(xiàn)在的應(yīng)用場(chǎng)景。

filename和chunkFilename的區(qū)別

能夠打包之后，我們會(huì)發(fā)現(xiàn)打包出來(lái)的chunk的路徑和命名是極其簡(jiǎn)單的1,2,3...這樣子的數(shù)字，對(duì)于我們要定制路徑和名字的話，就會(huì)涉及到filename和chunkFilename。

• output.filename 決定了每個(gè)入口(entry) 輸出 bundle 的名稱。
• output.chunkFilename 決定了非入口(non-entry) chunk 文件的名稱。

常用的Webpack配置如下

module.exports = {
 //...
 output: {
  filename: '[name].[hash].bundle.js',
  chunkFilename: '[name].[hash].chunk.js',
 }
};

filename和chunkFilename對(duì)應(yīng)的結(jié)果可以由以下參數(shù)拼接或者返回：

不同的是chunkFilename我們不能想filename中的name那樣，可以在entry中定義。也就是說(shuō)對(duì)于chunkFilename，默認(rèn)[id]和[name]是一樣的，那么如何自定義name呢？

如何命名chunk的名稱

只能說(shuō)哪里有壓迫，哪里就會(huì)有反抗，chunkFileName不能靈活自定義，這誰(shuí)能忍，于是便有了/* webpackChunkName: "" */，號(hào)稱是Magic Comments（魔術(shù)注釋法）。

Webpack通過(guò)增加內(nèi)聯(lián)注釋來(lái)告訴運(yùn)行時(shí)，該有怎樣的行為。通過(guò)向import中添加注釋，我們可以執(zhí)行諸如命名chunk或選擇不同模式之類的操作。

這里著重講一下webpackChunkName，它其實(shí)就是對(duì)chunkFilename定義時(shí)[name]值的改寫(xiě)，/* webpackChunkName: "hello" */，意味著[name]等于hello。

于是上面的代碼就會(huì)按照下面的方式來(lái)寫(xiě)，打包出來(lái)的chunk文件將會(huì)出現(xiàn)在plugins文件夾下，名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。

import(/* webpackChunkName: "plugins/myModule" */
  './myModule.js')
  .then(myModule => {
    console.log(myModule.default);
  });

更多的魔術(shù)注釋，請(qǐng)參考Webpack官方文檔。

結(jié)束了

到此為止，我們已經(jīng)可以將代碼打包到多個(gè)文件，每個(gè)chunk可以獨(dú)立命名，是的就是這樣。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)億速云的支持。