webpack | CDN配置

置顶 已于 2022-02-23 19:03:57 修改
阅读量8.7k 收藏 7
点赞数 2
分类专栏： webpack 文章标签： webpack CDN vue
于 2019-03-11 11:49:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36145914/article/details/88391090
版权
本文介绍了在前端项目中使用CDN加速加载的原因和实现步骤，通过将vue和vue-router等库放在CDN上，减少app.js和vendor.js的大小，利用浏览器多线程同时下载资源，提高首屏加载速度。文章提供了一个基于vue cli 2的示例，展示了如何配置externals和修改index.html，以及使用webpack-bundle-analyzer观察优化效果。
摘要由CSDN通过智能技术生成

文章目录


若有疑问，欢迎评论，我会尽快回复。

为什么使用CDN

除却CDN自身的优势，在前端工程中，将静态文件放到CDN上，可以直观地减小资源包大小，同时加快首屏加载。

  1. 若不使用CDN，则所有的资源都会被打包到app.js和vendor.js中，页面需要等到这两个包下载完成才可以显示。
  2. 若使用CDN，则可以利用浏览器多线程的优势，同时下载若干静态文件以及剩下的app.js和vendor.js，以此达到加快加载的目的。

实现的一般过程

以下以vue cli 2为例，将vue,vue-router放到CDN上。

  1. 首先，在index.html的头部引入cdn资源。（因为是测试，此处使用免费的bootcdn）
    index.html :
    <script src="https://cdn.bootcss.com/vue/2.6.8
最低0.47元/天 解锁文章
MGsniper
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.config.js基本配置
liuhao9999的博客
04-20 4456
const path = require('path') const webpack = require('webpack') const createThemeColorReplacerPlugin = require('./config/plugin.config') function resolve (dir) { return path.join(__dirname, dir) } const isProd = process.env.NODE_ENV === 'production' .
webpack-cdn-plugin：一个Webpack插件，它使用CDN url的外部进行生产，而使用本地node_modules进行开发
02-03
注意：这仅适用于Webpack 4，如果您仍使用Webpack 3或更低版本，请使用1.x版本 HTML Webpack插件的CDN扩展 通过允许您指定要从开发中的node_modules和生产中的CDN外部化的模块，增强了功能。 基本上，这将使您大大减少开发时的构建时间并提高生产中的页面加载性能。 安装 建议在节点5.x或更高版本上运行webpack 使用npm安装插件： npm install webpack-cdn-plugin --save-dev 或纱线 yarn add webpack-cdn-plugin --dev 基本用法 在您的webpack配置中需要插件： const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ; const WebpackCdnPlugin = require ( 'webpack-cdn-plugin' ) ; 将插件添加到您的webpack配置中： module . exports = { // ... plugins : [ new HtmlW
webpack性能优化，CDN内容分发分发网络
dxh9231028的博客
08-21 187
cdn上部署项目有两种方案，一种是全部部署，另外一种是将一些包忽略不进行打包（如axios，vue，react等）转而使用cdn服务器上对应的包，这样可以提高一定性能。在这个过程中节点就是cdn服务器，所有cdn服务器组成cdn内容分发网络，用户获取数据时如果本地cdn服务器有则直接返回数据，如果没有，就请求源站，并将该数据缓存。如果该IP地址对应的节点未缓存该资源，则节点向源站发起对该资源的请求。如果该IP地址对应的节点已缓存该资源，则会将数据直接返回给用户。用户向获取的IP地址发起对该资源的访问请求。
2024年最全弄懂webpack，只要看这一片就够了（文末有福利）(1)，2024年最新大厂的面试官
最新发布
2401_84434301的博客
05-14 679
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
webpack的常用配置
song_pan_hua的博客
05-29 403
只要将 thread-loader 放在构建耗时较大的 loader 之前，比如 babel-loader。在前端工程中，将静态文件放在cdn上，可以直观地减小资源包大小，同时加快首屏加载。（使用cdn，可以利用浏览器多线程的优化，同时下载静态文件和打包文件）使用高防cdn，不仅能解决不同地区的网络访问速度，还能减少因并发量太大给服务器带来的压力，可以隐藏网站源IP。拆分bundles，dll的作用是将项目中一些不常改变的依赖单独打包，生成的manifest.json文件去引用对应的依赖。
【webpack】从webpack看性能优化（二）
QDCXYXZ_的博客
09-13 466
CDN称之为内容分发网络(Content Delivery Network或Content Distribution Network，缩写:CDN)，它是指通过相互连接的网络系统，利用最靠近每个用户的服务器;更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户;来提供高性能、可扩展性及低成本的网络内容传递给用户。在开发中，我们使用CDN主要是两种方式publicPath属性主要用于指定打包后资源文件的访问路径中的 URL 以 HTML 页面为基准。
【webpack】动态配置cdn，多模板入口项目搭建
qq_40591925的博客
08-09 329
查看当前项目 webpack 配置，进而知道注入 cdn 模块的名称。此时配置成功后，公共页面路由是这样的。，配置对应多项目的对应路由。合并时需要调用封装的方法。,对应项目的路由是这样的。,获取目录下的文件名称。,配置多项目的功能页面。按照这个模板创建项目。，动态生产 page。last. 具体文档。
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
Webpack配置 process.env.NODE_ENV OR options.mode ：此插件仅适用于生产模式。 output.publicPath ：我们只支持/或空字符串（为简单起见）。 optimization.minimize : 如果您的 CDN 提供商可以进行压缩工作，则...
webpack-cdn-plugin-master.rar
10-09
此外，`webpack-cdn-plugin` 还支持其他 CDN 服务商，如又拍云、七牛云等，只需要调整 `cdn` 配置即可。同时，你还可以根据需要自定义上传策略，比如只上传更改过的文件，或者在开发环境中使用本地路径，而在生产...
webpack前端配置案例
07-24
9. **externals**: 如果项目依赖某些外部库，不希望被打包，可以在这里配置，让它们通过CDN等方式引入。 10. **mode**: 设置为'production'或'development'，Webpack 会根据模式应用默认的优化策略。 以上仅是...
HTMLWebpack插件的CDN扩展
08-10
接着，安装CDN扩展，通常我们会选择`html-webpack-externals-plugin`或者`webpack-subresource-integrity`等插件，它们可以帮助我们在Webpack配置中添加CDN链接： ```bash npm install ...
Vite和Webpack如何使用CDN包
IT飞牛
09-07 1122
为了精简打包输出的dist目录大小，我们可以引入CDN外部包的方式，来缩小打包的体积，加快打包速度。这里介绍Vite和Webpack中如何引入。
webpack静态资源上传到CDNS （阿里云 OSS，亚马逊 AWS S3，七牛云 Qiniu Cloud Kodo）webpack-plugin-cdns
mebell的专栏
09-15 896
webpack-plugin-cdns 是一个 Webpack 插件，用于实现将前端项目中的资源（如 JavaScript、CSS、图片等）上传到 CDN(OSS、S3、Kodo) 服务器。从而完成资源的 CDN 加速。
CDN加速及webpack中配置CDN加速
黎小小的博客
12-20 438
实际上最影响用户体验的还是网页首次打开时的加载等待。导致这个问题的根本是网络传输过程耗时大，CDN 的作用就是加速网络传输。CDN 又叫内容分发网络，通过，从而加速资源的获取速度。CDN 其实是通过优化物理链路层传输过程中的网速有限、丢包等问题来提升网速的。
Webpack中 CDN加速
七月
03-17 1254
一、什么是CDN？ 通过压缩代码的手段可减小网络传输的大小，但实际上最影响用户体验的还是网页首次打开时的加载等 待，其根本原因是网络传输过程耗时较大。 1、CDN（内容分发网络）的作用： 加速网络传输，通过将资源部署到世界各地，使用户在访问时按照就近原则从离其最近的服务 器获取资源来加快资源的获取速度。 原理： ...
webpack使用HtmlWebpackPlugin进行cdn配置
Msgyvcici
03-25 4881
CDN服务商的选择 在前面的文章中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如： BootCDN unpkg 其中BootCDN 是 Bootstrap 中文网支持并维护的前端开源项目免费 CD...
webpack学习-cdn加速，使用 Tree Shaking，提取公共代码，分割代码按需加载 使用 Prepack开启 Scope Hoisting
VAN
12-15 806
前端八股文
webpack配置详解
Kotoba209_的博客
05-22 2395
webpack 基础配置总结文件大致结构entry**output****mode****loader****module****Plugins**sourceMapWebpackDevServerBabel处理ES6配置React打包环境多⻚⾯打包通⽤⽅案⽂件监听配置别名 resolve.aliasresolve.extensions配置使⽤静态资源路径publicPath(CDN)压缩css压缩HTMLdevelopment vs Production模式区分打包基于环境变量区分tree Shakin
webpack 中CDN
12-02
Webpack中的CDN是指将Webpack生成的资产上传到CDN，以便在生产环境中更快地加载资源。Webpack CDN插件可以帮助我们实现这一目标。以下是使用Webpack CDN插件的基本步骤： 1. 安装Webpack CDN插件：可以使用npm或yarn进行安装，具体命令如下： ``` npm install webpack-cdn-plugin --save-dev ``` 或 ``` yarn add webpack-cdn-plugin --dev ``` 2. 在Webpack配置文件中引入Webpack CDN插件： ```javascript const WebpackCdnPlugin = require('webpack-cdn-plugin'); ``` 3. 在Webpack配置文件中添加Webpack CDN插件： ```javascript plugins: [ new WebpackCdnPlugin({ modules: [ { name: 'react', var: 'React', path: 'umd/react.production.min.js', }, { name: 'react-dom', var: 'ReactDOM', path: 'umd/react-dom.production.min.js', depends: ['react'], }, ], publicPath: '/node_modules', }), ] ``` 在上面的示例中，我们将React和ReactDOM从CDN加载。我们指定了模块的名称，变量名，路径和依赖项。我们还指定了公共路径，这是Webpack生成的资产的基本路径。 通过使用Webpack CDN插件，我们可以将Webpack生成的资产上传到CDN，以便在生产环境中更快地加载资源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值