mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 19:42:08 +08:00
85 lines
2.9 KiB
Markdown
85 lines
2.9 KiB
Markdown
### <span id="externals">✅ 配置 externals 引入 cdn 资源 </span>
|
||
|
||
这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可
|
||
以实际测试一下。
|
||
|
||
另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）
|
||
|
||
因为页面每次遇到`<script>`标签都会停下来解析执行，所以应该尽可能减少`<script>`标签的数量 `HTTP`请求存在一定的开销，100K
|
||
的文件比 5 个 20K 的文件下载的更快，所以较少脚本数量也是很有必要的
|
||
|
||
暂时还没有研究放到自己的 cdn 服务器上。
|
||
|
||
```javascript
|
||
const defaultSettings = require('./src/config/index.js')
|
||
const name = defaultSettings.title || 'vue mobile template'
|
||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||
|
||
// externals
|
||
const externals = {
|
||
vue: 'Vue',
|
||
'vue-router': 'VueRouter',
|
||
vuex: 'Vuex',
|
||
vant: 'vant',
|
||
axios: 'axios',
|
||
}
|
||
// CDN外链，会插入到index.html中
|
||
const cdn = {
|
||
// 开发环境
|
||
dev: {
|
||
css: [],
|
||
js: [],
|
||
},
|
||
// 生产环境
|
||
build: {
|
||
css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
|
||
js: [
|
||
'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
|
||
'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
|
||
'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
|
||
'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
|
||
'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js',
|
||
],
|
||
},
|
||
}
|
||
module.exports = {
|
||
configureWebpack: config => {
|
||
config.name = name
|
||
// 为生产环境修改配置...
|
||
if (IS_PROD) {
|
||
// externals
|
||
config.externals = externals
|
||
}
|
||
},
|
||
chainWebpack: config => {
|
||
/**
|
||
* 添加CDN参数到htmlWebpackPlugin配置中
|
||
*/
|
||
config.plugin('html').tap(args => {
|
||
if (IS_PROD) {
|
||
args[0].cdn = cdn.build
|
||
} else {
|
||
args[0].cdn = cdn.dev
|
||
}
|
||
return args
|
||
})
|
||
},
|
||
}
|
||
```
|
||
|
||
在 public/index.html 中添加
|
||
|
||
```javascript
|
||
<!-- 使用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文件，配置在vue.config.js下 -->
|
||
<% for (var i in
|
||
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
|
||
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||
<% } %>
|
||
```
|