Webpack按需加載打包chunk命名的方法

前言

最近，遇到復雜h6頁面開發，為了優化H5首屏加載速度，想到使用按需加載的方式，減少首次加載的JavaScript文件體積，于是將處理過程在這里記錄一下，涉及到的主要是以下三點：

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

1 使用Webpack如何做按需加載

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

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

require.ensure()

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

webpack 在編譯時，會靜態地解析代碼中的 require.ensure()，同時將[模塊b] 添加到一個分開的 chunk 當中。這個新的 chunk 會被 webpack 通過 jsonp 來按需加載。

為什么說到是靜態分析，我們可以看到下面的require.ensure語法，第二個參數callback就是一個回調函數。其中需要注意的是，這個回調函數有一個參數require，通過這個require就可以在回調函數內按需引入其他模塊。==值得注意的是，雖然這個require是回調函數的參數"module"，理論上可以換其他名稱，但是實際上是不能換的，否則webpack就無法靜態分析的時候處理它。==

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

import()

要注意的是import() 函數不同于import命令，import 是 ECMAScript 6 Module 的語法，import 是靜態執行，這里不多說，可以去看import 命令。

import(specifier)

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

import()函數是 ECMAScript Stage 3 草案階段的語法；用于完成動態加載即運行時加載，可以用在任何地方。import()函數 返回的是一個 Promise。類似于 CommonJs 的 require() ，區別主要是前者是異步加載，后者是同步加載。

import的應用場景有以下三種 (參考自ECMAScript 6 入門):

• 按需加載。import()可以在需要的時候，再加載某個模塊
• 條件加載。import()可以放在if代碼塊，根據不同的情況，加載不同的模塊。
• 動態的模塊路徑。import()允許模塊路徑動態生成。

用法大致如下：

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

小結

目前我們用的比較多的是import來做按需加載，模塊路徑可以動態生成，更適合現在的應用場景。

filename和chunkFilename的區別

能夠打包之后，我們會發現打包出來的chunk的路徑和命名是極其簡單的1,2,3...這樣子的數字，對于我們要定制路徑和名字的話，就會涉及到filename和chunkFilename。

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

常用的Webpack配置如下

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

filename和chunkFilename對應的結果可以由以下參數拼接或者返回：

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

如何命名chunk的名稱

只能說哪里有壓迫，哪里就會有反抗，chunkFileName不能靈活自定義，這誰能忍，于是便有了/* webpackChunkName: "" */，號稱是Magic Comments（魔術注釋法）。

Webpack通過增加內聯注釋來告訴運行時，該有怎樣的行為。通過向import中添加注釋，我們可以執行諸如命名chunk或選擇不同模式之類的操作。

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

于是上面的代碼就會按照下面的方式來寫，打包出來的chunk文件將會出現在plugins文件夾下，名字叫myModule.a2d1d5d8e7d5d4d4d4se.chunk.js。

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

更多的魔術注釋，請參考Webpack官方文檔。

結束了

到此為止，我們已經可以將代碼打包到多個文件，每個chunk可以獨立命名，是的就是這樣。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。