项目上线-CDN

项目上线

对项目进行打包, 将打包后的内容,部署到服务器中
打包 : npm run build
把打好的包放到 http-server 里面,演示

第一次截图

1. 介绍 vendor : 里面放一些第三方包 vue/vue-router/element-ui 包等
   只要不是我们自己写的代码,都属于第三方
2. 优化 :
   2.1 优化打包的第三方 (CDN)
   2.2 按需加载

   首屏加载时间,是衡量一个网站性能快慢的很重要的一个指标,
   首屏加载时间越快,用户存留就越多,用户量就越高
   如何提高加载速度呢?
   //1. 只加载首屏中看到的内容, 没有看到的内容都不加载,需要用到的时候,再去加载
   //2. 进来减少首屏的请求次数
   //3. vue 项目打包的时候,如何实现按需加载功能 ?
   // 实现说明 : vue 的异步组件(路由) 配合 webpack 代码分割的功能,很容易实现按需加载功能
   // 如何在项目中,通过代码实现按需加载呢 ? 讲导入组件的位置, 改为动态加载

3. 按需加载 : 参考 : vue-router => 路由栏加载
   const Home = () => import(’@/components/Home/Home.vue’)

4. 打包查看 js 文件

第二次截取

1. 查看多的 js 文件
2. 重新打包运行,演示点击进入按需加载
3. 打包 GoodsAdd 和 Goods 在一起的包
   const Goods = () =>
   import(/_ webpackChunkName:‘goods’ / ‘@/components/Goods/Goods.vue’)
   const GoodsAdd = () =>
   import(/ webpackChunkName:‘goods’ _/ ‘@/components/GoodsAdd/GoodsAdd.vue’)

第三次截图

1. 名字是 goods
2. 文件也少了一个

CDN

为什么打包后,第三方文件体积很大,因为第三方文件比较多
如何优化 ?? 不再将第三方文件 打包到 dist, 但是, 项目中还是要是要第三方文件,我们通过一个在线的
的第三方文件路径, 来引入这个文件,(CDN)

1. 在 index.html 引入 CDN 文件
2. 在 webpack.base.conf.js

externals : {
  vue : 'Vue',
  "vue-router" : "VueRouter"
}

3. 其他配置

4. 以后使用 :
   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

• 开源项目 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

• vue

• vue-router

• axios

• element-ui JS

• element-ui CSS

• 说明：

  • 1 先在官方文档查找提供的 CDN
  • 2 如果没有，在 https://www.bootcdn.cn/ 或其他 CDN 提供商 查找

Quill

• vue-quill-editor 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"
/>