避免CDN引用資源被webpack打包進(jìn)出口bundle.js文件

SillyMonkey 發(fā)布于2019-08-23 17:01 / 3816人閱讀

摘要：解決不做任何配置也同樣被打包進(jìn)的出口文件的問(wèn)題先說(shuō)說(shuō)為什么使用打包事件太長(zhǎng)，打包代碼體積太大，請(qǐng)求慢服務(wù)器不穩(wěn)定帶寬不高，使用可以回避服務(wù)器帶寬問(wèn)題資源優(yōu)化解決方案使用配置項(xiàng)防止將某些包打包到中，而在運(yùn)行時(shí)再去外部獲取擴(kuò)展依賴(lài)拿來(lái)舉例從引入

解決cdn不做任何配置也同樣被打包進(jìn)webpack的出口文件的問(wèn)題

先說(shuō)說(shuō)為什么使用CDN

打包事件太長(zhǎng)，打包1代碼體積太大，請(qǐng)求慢

服務(wù)器不穩(wěn)定帶寬不高，使用CDN可以回避服務(wù)器帶寬問(wèn)題

資源優(yōu)化

解決方案

使用externals配置項(xiàng): 防止將某些import包打包到bundle中，而在運(yùn)行時(shí)再去外部獲取擴(kuò)展依賴(lài)
·拿jQuery來(lái)舉例

1. 從CDN引入jQuery

```javascript

```

2. webpack.config.js配置

```javascript
    // ....
    externals: {
        jquery: "jQuery"
    }
```

3. 這樣就解決了那些不需要改動(dòng)的依賴(lài)
具有外部依賴(lài)(external dependency)的 bundle 可以在各種模塊上下文(module context)中使用

```javascript
import $ from "jquery";

$(".my-element").animate(/* ... */);
```

對(duì)于通過(guò)externals設(shè)置的外部依賴(lài)，可以通過(guò)以下幾種方式來(lái)進(jìn)行訪問(wèn)

root 全局訪問(wèn)
commonJS模塊訪問(wèn)
AMD模塊訪問(wèn)

GPU云服務(wù)器云服務(wù)器 Webpack打包分塊 webpack引用jquery 云主機(jī)怎么避免被攻擊 amazon如何避免被關(guān)聯(lián)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103692.html

相關(guān)文章

了解Webpack嗎？

摘要：你了解嗎核心概念的核心概念大致分為四個(gè)入口出口插件，是一個(gè)打包模塊化的工具，專(zhuān)注構(gòu)建模塊化項(xiàng)目。優(yōu)點(diǎn)只更新變更內(nèi)容，以節(jié)省寶貴的開(kāi)發(fā)時(shí)間。在構(gòu)建過(guò)程中，將引用的靜態(tài)資源路徑修改為上對(duì)應(yīng)的路徑。可以通過(guò)在啟動(dòng)時(shí)追加參數(shù)來(lái)實(shí)現(xiàn)提取公共代碼。你了解Webpack嗎？核心概念 Webpack的核心概念大致分為四個(gè)：入口、出口、loader、插件，是一個(gè)打包模塊化js的工具，專(zhuān)注構(gòu)建模塊化項(xiàng)...

Cympros 2019-08-23 18:29 評(píng)論0 收藏0
聊聊webpack

摘要：但是由于缺乏規(guī)范化管理，出現(xiàn)了很多種模塊化規(guī)范，從針對(duì)的規(guī)范，到針對(duì)瀏覽器端的，終于在里規(guī)范了前端模塊化?？梢酝ㄟ^(guò)兩種方式之一終端或。導(dǎo)出多個(gè)配置對(duì)象運(yùn)行時(shí)，所有的配置對(duì)象都會(huì)構(gòu)建。在階段又會(huì)發(fā)生很多小事件。隨著前端的迅速發(fā)展，web項(xiàng)目復(fù)雜度也是越來(lái)越高。為了便捷開(kāi)發(fā)和利于優(yōu)化，將一個(gè)復(fù)雜項(xiàng)目拆分成一個(gè)個(gè)小的模塊，于是模塊化開(kāi)發(fā)出現(xiàn)了。但是由于缺乏規(guī)范化管理，出現(xiàn)了很多種模塊化規(guī)范...

Ashin 2019-08-26 10:21 評(píng)論0 收藏0
Webpack系列-第一篇基礎(chǔ)雜記

摘要：系列文章系列第一篇基礎(chǔ)雜記系列第二篇插件機(jī)制雜記系列第三篇流程雜記前言公司的前端項(xiàng)目基本都是用來(lái)做工程化的，而雖然只是一個(gè)工具，但內(nèi)部涉及到非常多的知識(shí)，之前一直靠來(lái)解決問(wèn)題，之知其然不知其所以然，希望這次能整理一下相關(guān)的知識(shí)點(diǎn)。系列文章 Webpack系列-第一篇基礎(chǔ)雜記 Webpack系列-第二篇插件機(jī)制雜記 Webpack系列-第三篇流程雜記前言公司的前端項(xiàng)目基本都是用...

Batkid 2019-08-23 15:21 評(píng)論0 收藏0
【提高系列】webpack相關(guān)知識(shí)

摘要：基本配置項(xiàng)基本配置項(xiàng)。的插件架構(gòu)主要基于實(shí)現(xiàn)的，這個(gè)就是專(zhuān)注于事件的廣播和操作。開(kāi)啟多進(jìn)程，加快打包速度。這次我們主要研究的是webpack框架的相關(guān)知識(shí)，webpack是一個(gè)打包構(gòu)建的前端框架，用于解決前端開(kāi)發(fā)的模塊化問(wèn)題。應(yīng)用場(chǎng)景和縱向比較說(shuō)到webpack，肯定你還會(huì)想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區(qū)別呢？我們一起來(lái)分析...

DirtyMind 2019-08-22 15:18 評(píng)論0 收藏0
Webpack基本功能理解以及使用

摘要：在這個(gè)過(guò)程中，會(huì)用到一些解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言例如這些工具的配置使用都是在中完成的。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。對(duì)于前端工程化，webpack一個(gè)神奇的工具，既然是個(gè)神奇的工具。那我們保留我們的好奇心，來(lái)聊一聊它，首先我們要搞清楚webpack到底是用來(lái)解決什么問(wèn)題的，然后我們來(lái)看看它到底是怎么做的，最后來(lái)看看...

KnewOne 2019-08-26 10:09 評(píng)論0 收藏0