webpack配置cdn资源

最新推荐文章于 2024-09-29 17:43:11 发布

麦兜_冰夕

最新推荐文章于 2024-09-29 17:43:11 发布

阅读量3k

点赞数

分类专栏： VUE webpack 文章标签： vue.js webpack配置cdn资源 vue.config配cdn vue项目配置cdn资源

本文链接：https://blog.csdn.net/lyn1772671980/article/details/121989613

版权

本文介绍了在Vue项目中如何配置CDN以加速资源加载。重点在于vue.config.js的设置，通过修改配置文件，将部分库引用从本地转移到CDN，从而提高应用的加载速度。

摘要由CSDN通过智能技术生成

1.主要配置如下：

const assetsCDN = {
  // webpack build externals
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios'
  },
  css: [],
  // https://unpkg.com/browse/vue@2.6.10/
  js: [
    '//cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
    '//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    '//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    '//cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
  ]
}

configureWebpack: {
    externals: assetsCDN.externals
  },

  chainWebpack: config => {
      config.plugin('html').tap(args => {
        args[0].cdn = assetsCDN
        return args
      })
  },

完整的vue.config.json文件如下

const path = require('path')
const webpack = require('webpack')
const GitRe

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

麦兜_冰夕

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue.config.js基本配置

liuhao9999的博客

04-20

4479

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配置

MGsniper的博客

03-11

8884

本文将介绍 vue 项目的CDN设置

参与评论您还未登录，请先登录后发表或查看评论

Webpack 特性探讨：CDN、分包、Tree Shaking 与热更新

最新发布

前端探索者

09-29

1339

Webpack 作为现代前端开发中的核心构建工具，提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新（HMR）等关键特性。我们将使用前一篇文章中的代码，然后我们引入一些图片、css 等资源文件已经一些常用的第三方库，如lodash。

webpack使用简介

我的博客

06-10

360

1.webpack基本介绍？ webpack是一种各种模块的处理方案，在其作用下，一切皆模块，其主要作用有：压缩合并js,css，img文件制作雪碧图将sass，less等预处理器转为可以正常使用了css 将TypeScript代码转为原生的javascript代码 2.webpack的安装和命令行？在电脑任意位置下，长按shift键，点检打...

Webpack优化 -生产环境下使用CDN

听海边涛声

07-22

372

Webpack优化 -生产环境下使用CDN

【webpack】动态配置cdn，多模板入口项目搭建

qq_40591925的博客

08-09

387

查看当前项目 webpack 配置，进而知道注入 cdn 模块的名称。此时配置成功后，公共页面路由是这样的。，配置对应多项目的对应路由。合并时需要调用封装的方法。,对应项目的路由是这样的。,获取目录下的文件名称。,配置多项目的功能页面。按照这个模板创建项目。，动态生产 page。last. 具体文档。

[转]webpack | CDN配置(转载请删除括号里的内容)

jiaoqi6132的博客

06-17

258

文章目录为什么使用CDN 实现的一般过程效果案例下载若有疑问，欢迎评论，我会尽快回复。为什么使用CDN 除却CDN自身的优势，在前端工程中，将静态文件放到CDN上，可以直观地减小资源包大小，同时加快首屏加载。若不使用CDN，则所有的资源都会被打包到app.js和vendor.js中，页面需要等到这两个包下载完成才可以显示。若使用CDN，则可以利用浏览器多线程的优势，同时下载若干静态文件以及剩下的app.js和vendor.js，以此达到加快加载的目的。 ...

webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源

05-31

Webpack配置 process.env.NODE_ENV OR options.mode ：此插件仅适用于生产模式。 output.publicPath ：我们只支持/或空字符串（为简单起见）。 optimization.minimize : 如果您的 CDN 提供商可以进行压缩工作，则...

vue项目webpack使用cdn

大湿胸的博客

07-15

2138

1.在index.html中引入vue和vue-router <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> 2.在build文件夹中的webpack.base.conf.js添加 externals: .

Webpack中 CDN加速

七月

03-17

1312

一、什么是CDN？通过压缩代码的手段可减小网络传输的大小，但实际上最影响用户体验的还是网页首次打开时的加载等待，其根本原因是网络传输过程耗时较大。 1、CDN（内容分发网络）的作用：加速网络传输，通过将资源部署到世界各地，使用户在访问时按照就近原则从离其最近的服务器获取资源来加快资源的获取速度。原理： ...

什么是CDN，有什么用

qq_36042938的博客

01-09

1461

为什么会有CDN 1995年，麻省理工学院教授、互联网的发明者之一，Tim Berners-Lee博士发现，网络拥塞越来越严重，将会成为互联网发展的最大障碍，之后有人开发了利用数学运算法则来处理内容的动态路由算法技术，有效地解决了这个难题 CND原理上面图片可以很清晰的看出传统架构和CDN架构的不同。核心思想就是使用户可就近访问网络，取得所需内容，解决网络拥挤的状况，明显提高用户访问...

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

HTMLWebpack插件的CDN扩展

08-10

能够使用外部CDN网址的Webpack插件，用于生产和本地node_modules进行开发

自动匹配可用CDN资源的webpack插件

08-10

自动匹配可用 CDN 资源的 webpack 插件

详解Webpack如何引入CDN链接来优化编译后的体积

12-29

背景在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？步骤 1.引入CDN链接在项目的 index.html 中，常规方式引入 CDN 链接，此处以 vue 和 element-ui 为例： <body> <div id=app></div>  <script src=

Webpack CDN 插件使用教程

gitblog_00705的博客

08-16

345

Webpack CDN 插件使用教程 webpack-cdn-pluginA webpack plugin that use externals of CDN urls for production and local node_modules for development项目地址:https://gitcode.com/gh_mirrors/we/webpack-cdn-plugin 1. ...

webpack的常用配置

song_pan_hua的博客

05-29

489

只要将 thread-loader 放在构建耗时较大的 loader 之前，比如 babel-loader。在前端工程中，将静态文件放在cdn上，可以直观地减小资源包大小，同时加快首屏加载。（使用cdn，可以利用浏览器多线程的优化，同时下载静态文件和打包文件）使用高防cdn，不仅能解决不同地区的网络访问速度，还能减少因并发量太大给服务器带来的压力，可以隐藏网站源IP。拆分bundles，dll的作用是将项目中一些不常改变的依赖单独打包，生成的manifest.json文件去引用对应的依赖。

gitblog_00042的博客

05-09

493

推荐使用：Webpack CDN 插件

gitblog_00617的博客

08-16

661

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，以便在生产环境中更快地加载资源。