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

SillyMonkey 发布于2019-08-23 17:01 / 3607人阅读

摘要：解决不做任何配置也同样被打包进的出口文件的问题先说说为什么使用打包事件太长，打包代码体积太大，请求慢服务器不稳定带宽不高，使用可以回避服务器带宽问题资源优化解决方案使用配置项防止将某些包打包到中，而在运行时再去外部获取扩展依赖拿来举例从引入

解决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模块访问

服务器托管 idc机房托管 Webpack打包分块 webpack引用jquery 云主机怎么避免被攻击 amazon如何避免被关联

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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