
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
请检查 引入的时候 组件名称是否 是 CDN资源中的别名。那么这个教程不适合!这个只适合Vue版本为。把 需要依赖引入的代码全部去掉了 , 例如。, 一般是在 public 文件夹下。
·
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
这个适合 Vue版本为 2.6.10 !!!!
未引入 CDN前 main.js
// 依赖使用 npm 方式引入
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
Vue.config.productionTip = false
const vueMain = new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
export default vueMain
更改CDN方式引入
在 vue.config 中引入 CDN
文件: vue.config.js
,如果没有 vue.config.js
那么这个教程不适合!! 这个只适合Vue版本为 2.6.10
// CDN资源
const cdn = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'ELEMENT'
},
// externals 资源对应 css cdn地址
css: [
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.min.css'
],
// externals 资源对应 JS cdn地址
js: [
'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.0.2/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.1.0/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.18.1/dist/axios.min.js',
'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js'
]
}
module.exports = {
// CDN配置
chainWebpack(config) {
// 引入CDN
// 告诉webpack需要排除的依赖名称和挂载在window上的对象属性名称。
config.set('externals', cdn.externals)
// 这里的作用是在后面index.html页面中通过link,script标签加载这些cdn链接。
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
// it can improve the speed of the first screen, it is recommended to turn on preload
// it can improve the speed of the first screen, it is recommended to turn on preload
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch')
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
config.when(process.env.NODE_ENV !== 'development', config => {
config.plugin('ScriptExtHtmlWebpackPlugin').after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}]).end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order-record-manage to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
)
}
}
index.html 加载 cdn资源
文件: inidex.html
, 一般是在 public 文件夹下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<!-- 遍历cdn配置里面加载css文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 遍历从cdn配置里面加载js文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script" />
<% } %>
</head>
<body>
<div id="app"></div>
<!-- 遍历从cdn配置里面加载js文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<script></script>
</body>
</html>
使用CDN引入资源后的main.js
把 需要依赖引入的代码全部去掉了 , 例如 import elementUi from 'element-ui'
// 部分 依赖使用 cdn方式引入
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
Vue.config.productionTip = false
const vueMain = new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
export default vueMain
如果引入CDN后 组件不生效
1、请检查 引入的时候 组件名称是否 是 CDN资源中的别名
2、这个只有生产模式才会使用CDN,本地开发模式 走的还是NPM!!!所以请打包运行测试
CDN 服务商推荐
BootCDN: BootCDN
jsDelivr: jsDelivr
更多推荐
所有评论(0)