Vue项目打包优化

项目打包的说明

项目写完了, 项目需要打包才能上线~

打包命令: yarn build

打包完目录文件的说明

1. 带 chunk-vendors 的都是 第三方的依赖包

2. 我们写的内容在 app.css / app.js

打完包的代码, 可以直接于服务器环境 根目录 运行~ 不需要额外配置

​ 插件: live-server 全局安装: npm i live-server -g
​ 启动: 只需要在项目dist目录中, 执行命令 live-server

但是, 如果将来要上传到 服务器的 子目录, 此时需要配置 publicPath

需要优化的点

1. 第三方包加载的优化: 优化第三方包的加载速度
2. 自己的 js 的加载优化

CDN的优化说明

CDN: 内容分发网络, 分布于世界各地的服务器, 可以更快速的完成内容的分发

直接部署着第三方包的资源 (且访问速度会更快)

如果是第三方的包，直接引入cdn的地址, 无需打包到 dist 中

• 开源项目 CDN 加速服务
• 1 在 index.html 中引入CDN提供的JS文件
• 2 在 vue.config.js 中添加配置 externals
• externals配置：

vue, vueRouter, element-ui, axios

// 配置 webpack
configureWebpack: {
    // 配置打包的排除项, 从外部引入
    externals: {
        包名:模块导出对象
        vue: "Vue",
        vuex: "Vuex",
        "vue-router": "VueRouter",
        "element-ui": "ELEMENT"  // 特例
    }
}

element-ui 样式, 也可以 cdn 引入

注意：通过CDN引入 element-ui 的样式文件后，就不需要在 main.js 中导入 element-ui 的CSS文件了。所以，直接注释掉 main.js 中的导入 element-ui 样式即可

异步组件 和 按需加载的说明

** 如何处理 vue 首屏加载过慢的问题!!!** 大型项目会有这个问题, 需要配置按需加载!!!

所有的组件, 都打包到同一个文件中

项目小没问题, 一次性将所有的组件都加载完了

但是, 如果项目大了, 首次加载会一次性将所有的组件加载, 就不合适了!!!

需求(组件按需加载):

1. 访问首页, 加载首页组件
2. 访问用户页, 加载用户组件

vue中的异步组件写法

• 修改 router/index.js 中导入组件的语法

// 使用：
// 异步组件的写法, 将组件定义成函数
const Home = () => import('./components/home/Home')
// 替换：
// import Home from './components/home/Home'

• 每个组件都打包成单独的文件了, 但是请求次数又太多了, 可以分模块

// 给打包生产的JS文件起名字
const Index = () => import(/* webpackChunkName: 'index' */'./components/Index.vue')

// chunkName相同，将 goods 和 goods-add 两个组件，打包到一起
const Goods = () => import(/* webpackChunkName: 'products' */'./components/goods')
const GoodsAdd = () => import(/* webpackChunkName: 'products' */'./components/goods-add')