欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年09月22日 10:02:30   作者:大河1989  
這篇文章主要給大家介紹了關(guān)于Webpack按需加載打包c(diǎn)hunk命名的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

1 使用Webpack如何做按需加載

大家都知道Webpack是現(xiàn)在流行的前端打包編譯工具,通過模塊之間的依賴關(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è)分開的 chunk 當(dāng)中。這個(gè)新的 chunk 會(huì)被 webpack 通過 jsonp 來按需加載。

為什么說到是靜態(tài)分析,我們可以看到下面的require.ensure語法,第二個(gè)參數(shù)callback就是一個(gè)回調(diào)函數(shù)。其中需要注意的是,這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)require,通過這個(gè)require就可以在回調(diào)函數(shù)內(nèi)按需引入其他模塊。==值得注意的是,雖然這個(gè)require是回調(diào)函數(shù)的參數(shù)"module",理論上可以換其他名稱,但是實(shí)際上是不能換的,否則webpack就無法靜態(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 的語法,import 是靜態(tài)執(zhí)行,這里不多說,可以去看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 草案階段的語法;用于完成動(dòng)態(tài)加載即運(yùn)行時(shí)加載,可以用在任何地方。import()函數(shù) 返回的是一個(gè) Promise。類似于 CommonJs 的 require() ,區(qū)別主要是前者是異步加載,后者是同步加載。

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

  • 按需加載。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來做按需加載,模塊路徑可以動(dòng)態(tài)生成,更適合現(xiàn)在的應(yīng)用場景。

filename和chunkFilename的區(qū)別

能夠打包之后,我們會(huì)發(fā)現(xiàn)打包出來的chunk的路徑和命名是極其簡單的1,2,3...這樣子的數(shù)字,對于我們要定制路徑和名字的話,就會(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對應(yīng)的結(jié)果可以由以下參數(shù)拼接或者返回:

模板 描述
[hash] 模塊標(biāo)識符(module identifier)的 hash
[chunkhash] chunk 內(nèi)容的 hash
[name] 模塊名稱
[id] 模塊標(biāo)識符(module identifier)
[query] 模塊的 query,例如,文件名 ? 后面的字符串
[function] 方法,可以返回一個(gè)filename字符串

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

如何命名chunk的名稱

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

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

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

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

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

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

結(jié)束了

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

總結(jié)

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

相關(guān)文章

  • javascript 刪除數(shù)組中重復(fù)項(xiàng)(uniq)

    javascript 刪除數(shù)組中重復(fù)項(xiàng)(uniq)

    巧妙去除數(shù)組中的重復(fù)項(xiàng)的方法參考,需要的朋友可以參考下。
    2010-01-01
  • 替換json對象中的key最佳方案

    替換json對象中的key最佳方案

    本文給大家介紹如何替換json對象中的key,通過實(shí)例代碼給大家介紹key的替換方法,代碼也很簡單,需要的朋友參考下吧
    2021-06-06
  • js ajaxfileupload.js上傳報(bào)錯(cuò)的解決方法

    js ajaxfileupload.js上傳報(bào)錯(cuò)的解決方法

    這篇文章主要為大家詳細(xì)介紹了js ajaxupload.js上傳報(bào)錯(cuò)的解決方法,感興趣的小伙伴們可以參考一下
    2016-05-05
  • Javascript驗(yàn)證上傳圖片大小[前臺處理]

    Javascript驗(yàn)證上傳圖片大小[前臺處理]

    在做上傳圖片的時(shí)候,如果不限制上傳圖片大小,后果非常的嚴(yán)重。解決這個(gè)問題有兩種方式:后臺處理、前臺處理
    2014-07-07
  • IE8下關(guān)于querySelectorAll()的問題

    IE8下關(guān)于querySelectorAll()的問題

    在IE8的新特性里,提到了會(huì)支持querySelector()和querySelectorAll()方法,如何使用這里就不說了,只是記錄下我在使用時(shí)遇到一個(gè)問題。
    2010-05-05
  • vue中雙token和無感刷新token的區(qū)別

    vue中雙token和無感刷新token的區(qū)別

    本文主要介紹了vue中雙token和無感刷新token的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-05-05
  • js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法

    js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法

    這篇文章主要介紹了js實(shí)現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法,實(shí)例分析了漸顯效果的實(shí)現(xiàn)要點(diǎn)與方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2015-04-04
  • js實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例

    js實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例

    下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)html table 行,列鎖定的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • js 判斷登錄界面的賬號密碼是否為空

    js 判斷登錄界面的賬號密碼是否為空

    本文主要介紹了利用display的none與block判斷登錄界面的賬號密碼是否為空的方法。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • webpack3.0升級4.0的方法步驟

    webpack3.0升級4.0的方法步驟

    這篇文章主要介紹了webpack3.0升級4.0的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04

最新評論