项目上线
对项目进行打包, 将打包后的内容,部署到服务器中
打包 : npm run build
把打好的包放到 http-server 里面,演示
第一次截图
- 介绍 vendor : 里面放一些第三方包 vue/vue-router/element-ui 包等
只要不是我们自己写的代码,都属于第三方 - 优化 :
2.1 优化打包的第三方 (CDN)
2.2 按需加载首屏加载时间,是衡量一个网站性能快慢的很重要的一个指标,
首屏加载时间越快,用户存留就越多,用户量就越高
如何提高加载速度呢?
//1. 只加载首屏中看到的内容, 没有看到的内容都不加载,需要用到的时候,再去加载
//2. 进来减少首屏的请求次数
//3. vue 项目打包的时候,如何实现按需加载功能 ?
// 实现说明 : vue 的异步组件(路由) 配合 webpack 代码分割的功能,很容易实现按需加载功能
// 如何在项目中,通过代码实现按需加载呢 ? 讲导入组件的位置, 改为动态加载
-
按需加载 :
参考 : vue-router => 路由栏加载
const Home = () => import(’@/components/Home/Home.vue’) -
打包查看 js 文件
第二次截取
- 查看多的 js 文件
- 重新打包运行,演示点击进入按需加载
- 打包 GoodsAdd 和 Goods 在一起的包
const Goods = () =>
import(/_ webpackChunkName:‘goods’ / ‘@/components/Goods/Goods.vue’)
const GoodsAdd = () =>
import(/ webpackChunkName:‘goods’ _/ ‘@/components/GoodsAdd/GoodsAdd.vue’)
第三次截图
- 名字是 goods
- 文件也少了一个
CDN
为什么打包后,第三方文件体积很大,因为第三方文件比较多
如何优化 ?? 不再将第三方文件 打包到 dist, 但是, 项目中还是要是要第三方文件,我们通过一个在线的
的第三方文件路径, 来引入这个文件,(CDN)
- 在 index.html 引入 CDN 文件
- 在 webpack.base.conf.js
externals : {
vue : 'Vue',
"vue-router" : "VueRouter"
}
-
其他配置
-
以后使用 :
4.1 bootstrap => bootCDN
4.2 https://www.jsdelivr.com/
4.3 官方文档
项目打包和优化
- 打包命令:
npm run build
按需加载
- 1 修改
router/index.js
中导入组件的语法
// 使用:
const Home = () => import('@/components/home/Home');
// 替换:
// import Home from '@/components/home/Home'
// 给打包生产的JS文件起名字
const Home = () =>
import(/* webpackChunkName: 'home' */ '@/components/home/Home');
// chunkName相同,将 goods 和 goods-add 两个组件,打包到一起
const Goods = () =>
import(/* webpackChunkName: 'goods' */ '@/components/goods');
const GoodsAdd = () =>
import(/* webpackChunkName: 'goods' */ '@/components/goods-add');
- 2 (该步可省略)修改
/build/webpack.prod.conf.js
中的 chunkFilename
{
// [name] 代替 [id]
chunkFilename: utils.assetsPath('js/[name].[chunkhash].js');
}
使用 CDN
-
1 在
index.html
中引入 CDN 提供的 JS 文件 -
2 在
/build/webpack.base.conf.js
中(resolve 前面)添加配置 externals -
注意:通过 CDN 引入 element-ui 的样式文件后,就不需要在 main.js 中导入 element-ui 的 CSS 文件了。所以,直接注释掉 main.js 中的导入 element-ui 样式即可
-
externals
配置:
externals: {
// 键:表示 导入包语法 from 后面跟着的名称
// 值:表示 script 引入JS文件时,在全局环境中的变量名称
vue: 'Vue',
axios: 'axios',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
BMap: 'BMap',
echarts: 'echarts',
}
import ElementUI from 'element-ui'
常用包 CDN
-
说明:
- 1 先在官方文档查找提供的 CDN
- 2 如果没有,在
https://www.bootcdn.cn/
或其他 CDN 提供商 查找
Quill
<!-- Include the Quill library -->
<script src="https://cdn.bootcss.com/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link
href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.core.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.snow.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.bootcss.com/quill/2.0.0-dev.3/quill.bubble.min.css"
rel="stylesheet"
/>