避免CDN引用资源被webpack打包进出口bundle.js文件
解决cdn不做任何配置也同样被打包进webpack的出口文件的问题
·拿jQuery来举例
先说说为什么使用CDN
- 打包事件太长,打包1代码体积太大,请求慢
- 服务器不稳定带宽不高,使用CDN可以回避服务器带宽问题
- 资源优化
解决方案
使用externals配置项: 防止将某些import包打包到bundle中,而在运行时再去外部获取扩展依赖·拿jQuery来举例
1. 从CDN引入jQuery ```javascript <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"> </script> ``` 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模块访问
相关推荐
webfullStack 2020-11-09
yezitoo 2020-06-03
不知道该写啥QAQ 2020-11-12
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gloria0 2020-10-26
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18