Vue项目上线前的优化及打包上线流程

一.项目优化策略

1. 生成打包报告
2. 第三方库启用CDN
3. Elment-ui组件按需加载
4. 路由懒加载
5. 图片懒加载
6. 图片压缩以及雪碧图
7. 首页定制内容

1.生成打包报告

打包时，为了直观的发现项目中的问题，可以在打包项目时生成报告，生成报告的方式有两种：

1.通过命令行参数的形式生成报告

通过vue-cli的命令选项可以生成打包报告
–report选项可以生成report，html帮助分析内容
vue-cli-service build --report

2.通过可视化的UI面板直接查看报告（推荐使用）
在可视化的UI面板中，通过控制台和分析面板，可以方便的看到项目中存在的问题

2.通过vue.config.js 修改wepack的默认配置

通过vue-cli3.0工具生成的项目，默认隐藏了所有的wbpack的配置项，目的是为了屏蔽项目的配置过程，让工程师把工作重心放到功能和业务实现上。

如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件。从而对项目的打包发布流程做自定义配置。

3.为开发模式和发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式和发布模式，共用一个打包的入口文件。为了将项目的开发流程和发布流程分离，我们可以分为两种模式，各自指定打包的入口文件：

1. 开发模式的入口为main-dev.js
2. 发布模式的入口为main-prod.js

4.Configurewebpack和Chainwebpack

在vue.config.js导出配置对象中，新增Configurewebpack和Chainwebpack节点，来自定义webpack的打包配置。
Configurewebpack和Chainwebpack的作用相同，唯一的区别就是他们修改webpack的方法不同：

1. Chainwebpack通过链式编程的行是，来修改默认的webpack配置
2. Configurewebpack通过操作对象的形式，来修改默认的webpack的配置。

5.通过chainWebpack自定义打包入口

module.exports = {
   
 chainWebpack: config => {
   
 config.when(process.env.NODE_ENV === 'production', config => {
   
 config.entry('app').clear().add('./src/main-prod.js')
 })
 config.when(process.env.NODE_ENV === 'development', config => {
   
 config.entry('app').clear().add('./src/main-dev.js')
 })
} }

6.通过externals加载外部CDN资源

默认情况下，通过inport语法导入第三发依赖包，最终会被打包合并到同一个文件中。从而导致打包成功后，单文件的体积过大问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

6.1通过externals加载外部CDN资源

配置代码如下：

config.set('externals', {
   
 vue: 'Vue'