避免CDN引用資源被webpack打包進出口bundle.js文件

SillyMonkey 發布于2019-08-23 17:01 / 3777人閱讀

摘要：解決不做任何配置也同樣被打包進的出口文件的問題先說說為什么使用打包事件太長，打包代碼體積太大，請求慢服務器不穩定帶寬不高，使用可以回避服務器帶寬問題資源優化解決方案使用配置項防止將某些包打包到中，而在運行時再去外部獲取擴展依賴拿來舉例從引入

解決cdn不做任何配置也同樣被打包進webpack的出口文件的問題

先說說為什么使用CDN

打包事件太長，打包1代碼體積太大，請求慢

服務器不穩定帶寬不高，使用CDN可以回避服務器帶寬問題

資源優化

解決方案

使用externals配置項: 防止將某些import包打包到bundle中，而在運行時再去外部獲取擴展依賴
·拿jQuery來舉例

1. 從CDN引入jQuery

```javascript

```

2. webpack.config.js配置

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

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

```javascript
import $ from "jquery";

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

對于通過externals設置的外部依賴，可以通過以下幾種方式來進行訪問

root 全局訪問
commonJS模塊訪問
AMD模塊訪問

云服務器 GPU云服務器 Webpack打包分塊 webpack引用jquery 云主機怎么避免被攻擊 amazon如何避免被關聯

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

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

了解Webpack嗎？

摘要：你了解嗎核心概念的核心概念大致分為四個入口出口插件，是一個打包模塊化的工具，專注構建模塊化項目。優點只更新變更內容，以節省寶貴的開發時間。在構建過程中，將引用的靜態資源路徑修改為上對應的路徑。可以通過在啟動時追加參數來實現提取公共代碼。你了解Webpack嗎？核心概念 Webpack的核心概念大致分為四個：入口、出口、loader、插件，是一個打包模塊化js的工具，專注構建模塊化項...

Cympros 2019-08-23 18:29 評論0 收藏0
聊聊webpack

摘要：但是由于缺乏規范化管理，出現了很多種模塊化規范，從針對的規范，到針對瀏覽器端的，終于在里規范了前端模塊化。可以通過兩種方式之一終端或。導出多個配置對象運行時，所有的配置對象都會構建。在階段又會發生很多小事件。隨著前端的迅速發展，web項目復雜度也是越來越高。為了便捷開發和利于優化，將一個復雜項目拆分成一個個小的模塊，于是模塊化開發出現了。但是由于缺乏規范化管理，出現了很多種模塊化規范...

Ashin 2019-08-26 10:21 評論0 收藏0
Webpack系列-第一篇基礎雜記

摘要：系列文章系列第一篇基礎雜記系列第二篇插件機制雜記系列第三篇流程雜記前言公司的前端項目基本都是用來做工程化的，而雖然只是一個工具，但內部涉及到非常多的知識，之前一直靠來解決問題，之知其然不知其所以然，希望這次能整理一下相關的知識點。系列文章 Webpack系列-第一篇基礎雜記 Webpack系列-第二篇插件機制雜記 Webpack系列-第三篇流程雜記前言公司的前端項目基本都是用...

Batkid 2019-08-23 15:21 評論0 收藏0
【提高系列】webpack相關知識

摘要：基本配置項基本配置項。的插件架構主要基于實現的，這個就是專注于事件的廣播和操作。開啟多進程，加快打包速度。這次我們主要研究的是webpack框架的相關知識，webpack是一個打包構建的前端框架，用于解決前端開發的模塊化問題。應用場景和縱向比較說到webpack，肯定你還會想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區別呢？我們一起來分析...

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

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

KnewOne 2019-08-26 10:09 評論0 收藏0