webapck 2的代碼分片

iKcamp 發布于2019-08-20 15:33 / 3446人閱讀

摘要：前端的代碼分片，或者說是按需加載，本質上是由于前端頁面越來越復雜，代碼體積越來越大，程序員需要對頁面資源的加載做細粒度的控制。這里需要說一下的是的第三參數，是這個分片的。

前端的代碼分片，或者說是按需加載，本質上是由于前端頁面越來越復雜，代碼體積越來越大，程序員需要對頁面資源的加載做細粒度的控制。按需加載當然是好東西，但是會讓頁面邏輯變得更加復雜。好在webpack出現，讓按需加載變得簡單多了。

我們來做一個簡單的demo，完整代碼
demo的功能很簡單，單擊一個按鈕，然后去加載一個js文件并執行。

index.html文件:

index.js文件

document.getElementById("btn").addEventListener("click",function(){
    require.ensure([],()=>{
        let hello = require("./Hello").default;
        hello();
    },"Hello")
})

Hello.js文件

export default function hello(){
    alert("hello.")
}

在 click 的事件處理函數中,通過 require.ensure標記分割點，然后加載Hello.js并賦值給變量hello，最后調用該方法。這里需要說一下的是require.ensure的第三參數，是這個分片chunk的name。如果不加這個參數，默認會以chunkid來命名該文件。這個參數在開發環境還是很有用的，畢竟1.js的文件名，讓人很難定位文件。

由于 ES2015 Loader spec 定義了 import() 方法來在運行時動態的加載javascript文件，所以webpack也把import()作為split code的分割點。

如果想用酷炫的import()語法，還需要安裝一個插件:
npm i babel-plugin-syntax-dynamic-import --save-dev。然后，就可以把上面的 index.js文件改成：

document.getElementById("btn").addEventListener("click",function(){
   import("./Hello").then((Hello) => {
        let hello = Hello.default;
        hello();
    }).catch(err => console.log("Failed to load moment", err))
})

import()支持promise語法，所以可以用catch來處理加載文件引起的異常。但是，它也有它的弱點，import()無法給這個文件命名（類似于require.ensure的第三個參數），這樣打包出來的文件都是用數字來標示的，非常難以區分，在開發環境下，會使定位錯誤變的更加困難。

此外，這兩種語法在引用文件時，文件路徑都不可以是表達式。例如：

 require.ensure([],()=>{
        let path = "./Hello";
        let hello = require(path).default;
        hello();
    },"Hello")

這樣會報錯，無法正常加載文件。

GPU云服務器云服務器 webapck 源代碼2 分片上傳分片上傳刪除分片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82334.html

百度地圖 osm地圖 leaflet echarts webapck的組合使用時的踩坑記錄

摘要：百度地圖創建標簽進行加載使用百度地圖需要百度地圖添加擴展，用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標的加載問題，詳見另外也可以考慮使用動態創建標簽的方法，類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖創建 script標簽進行加載 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 評論0 收藏0
webapck將css 打包后單獨提取到一個css文件中

webpack4 提倡，一旦用了這個，不能使用style-loader 以及css module 安裝 npm install --save-dev mini-css-extract-plugin rules rules: [ { test: /.css$/, use: [ { loader: MiniCssExtractPlug...

DevTTL 2019-08-23 14:02 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執行一下就可以檢測到文件的變化，然后為你執行一系列的自動化操作，同樣的操作也發生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發展很久以前，互聯網行業有個職位叫做軟件開發工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0
webpack的教程

摘要：有時候覺得一個工具的學習成本還是很大的，所以唯一的感覺就是隨隨便便放棄一個工具是多么的難。指定執行的方法命令。這時候我們再看一下目錄會多出來一個目錄說明你的處女終于破了。嘮嘮嗑 ?前幾天在學習webpack時,踩過很多坑，也聽過webapck是多么的嗶嗶嗶嗶~~，本人學習的工具有很多,比如sass的初級工具compass,自動化工具gulp,grunt,一起其他雜七雜八的工具。有時...

Zhuxy 2019-08-19 17:14 評論0 收藏0
vue-cli解析

摘要：在中，設置了一些配置，代碼如下通過它的注釋，我們可以理解它在中配置了靜態路徑本地服務器配置項等參數。下面還有一個的對象，它是在本地服務器啟動時，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設置，壓縮等。前言這段時間，算是空出手來寫幾篇文章了。由于很久都沒有時間整理現在所用的東西了，所以，接下來會慢慢整理出一些文檔來記錄前段時間的工作和生活。這篇文章的主...

KunMinX 2019-08-21 18:24 評論0 收藏0