1.配置externals结合CDN加速
流程
1.找到要CDN加速的包(report.html)中最大的包
2.去jsdelivr(Boot等CDN加速)上搜索对应的包名
3.将js文件引入到test.html测试,观察window对象中添加了什么属性
4.再vue.config.js中配置 externals属性
5.将测试的代码复制导index.html(注意全局 css也可以引入过来,将main.js的引入删除)
configureWebpack: {
打包优化
只要配置了externals,webpack 不会打爆对应的第三方模块
项目中怎么找echarts呢? 由属性值来指定
echarts:'echarts' 意思就是不打包echarts 模块了,去 window中找echarts变量
externals: {
// import 导包的包名:windows全局的成员名称
echarts: 'echarts'
}
}CDN文件配置
以采用CDN的方式，在页面模板中预先引入
vue.config.js
const cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element-ui js
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js',
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',
'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
]
}但是，这时的配置实际上是对 开发环境 和 生产环境 都生效的，
let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
externals = {
// key(要排除的包名), value(引入的CDN包的全局变量名)
'vue': 'Vue',
'element-ui': 'ELEMENT',
'xlsx': 'XLSX',
'moment': 'moment'
}
cdn = {
css: [
'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
'https://unpkg.com/element-ui/lib/index.js', // element-ui js
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js',
'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',
'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
]
}
}底下使用 externals
configureWebpack: {
// 配置单页应用程序的页面的标题
name: name,
externals: externals,
resolve: {
alias: {
'@': resolve('src')
}
}
},注入 CDN文件变量 到模板
chainWebpack(config) {
// 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'
}
])
// 注入cdn变量 (打包时会执行)
config.plugin('html').tap(args => {
args[0].cdn = cdn // 配置cdn给插件
return args
})
...
}找到 public/index.html。通过你配置的CDN Config 依次注入 css 和 js。
<head>
<!-- 引入样式 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
</head>
<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>最后，进行打包
2.路由懒加载
首先,vue是一个SPA单页应用,只有一个html页面.不管分成多少个组件,在第一次加载的时候都会把所有js文件加载出来.
哪怕在第一次加载的时候这个组件没显示,也还是会加载对应js文件.导致这个js文件过大,加载速度变慢,影响用户体验.
所以,vue推出了路由懒加载.
1.什么是路由懒加载
- 仅在需要的时候,加载路由对应的组件页面
2.好处
- 可以提高index.html首页的打开速度
Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：
// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')
const router = createRouter({
// ...
routes: [{ path: '/users/:id', component: UserDetails }],
})可以简写哦
routes: [{ path: '/users/:id', component: () => import('./views/UserDetails') }],
3.配置路由模式
hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网路路径中会有 “#” 号。
hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题
hash模式示例: http://localhost:8080/#/home http://localhost:8080/#/user
history模式： 美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api 。
由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404
history模式示例: http://localhost:8080/home http://localhost:8080/user
改成history模式非常简单，只需要将路由的mode类型改成history即可// 创建路由实例
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
// 指定路由规则
routes: [
...constantRoutes // 静态路由, 首页
]
})
为什么我打包后,打开页面时空白的呢?
要在服务器部署.你是不是vscode直接打开了
对的