项目优化

项目优化策略：

1生成打包报告

2第三方库启用CDN

3Element-ui组件按需加载

4路由懒加载

5首页内容定

1——生成打包报告

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

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

//通过vue-cli 的命令选项可以生成打包报告

// --report 选项可以生成report.html 以帮助分析包内容

vue-cli-service build --report

@2 通过可视化的UI面板直接查看报告

在可视化的UI面板，通过控制台和分析面板，可以方便地看到项目中所存在的问题。

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

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

如果程序员有修改webpack默认配置的需求，可以在项目根目录中，按需创建vue.config.js这个配置文件，从而对项目的打包发布过程做自定义的配置 https://cli.vuejs.org/zh/config/#vue-config-js 官方配置

//vue.config.js
//这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
  //选项 ...
}

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

默认情况下，vue项目的开发模式与发布模式，共用一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：

@1开发模式的入口文件为 src/main-dev.js

　 @2发布模式的入口文件为src/main-prod.js

4——configureWebpack和chainWebpack

在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来定义webpack的打包配置。

他们的作用相同，惟一的区别就是它们修改webpack配置的方式不同。

1chainWebpack通过链式编程的形式，来修改默认的webpack配置

2configureWebpack通过操作对象的形式，来修改默认的webpack配置

两者具体的使用差异：https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

//vue.config.js
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')
    })
  }
}

5——解决依赖单文件过大问题：

1@通过externals加载外部CDN资源

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

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

配置方法：效果显著

1 vue.config.js 发布模式

config.set('externals', {
  vue: 'Vue',
  'vue-router': VueRouter,
  axios: 'axios',
  lodash: '_',
  echarts: 'echarts',
  nprogress: 'NProgress',
  'vue-quill-editor': 'VueQuillEditor'
})

2 public/index.html文件的头部，添加如下CDN资源引用 CSS文件的引用 http://www.staticfile.org/

3 public/index.html文件的头部，添加如下CDN资源引用 JS文件的引用 https://www.jsdelivr.com/

2@通过CDN优化ElementUi的打包

具体操作流程：

1在main-prod.js中，注释掉element-ui按需加载的代码

2在index.html的头部区域中，通过CDN加载element-ui的js和css样式

**************************首页内容定制

不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下：

//vue.config.js
module.exports = {
  //选项
  chainWebpack: config => {
    //产品发布阶段
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
          args[0].isProd = true
          return args
      })
      
    })
    //产品开发阶段
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      config.plugin('html').tap(args => {
          args[0].isProd = false
          return args
        })
    })
  }
}

在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构

    <title><%= htmlWebpackPlugin.options.isProd ? '' :'dev -' %></title>
    

    <% if(htmlWebpackPlugin.options.isProd) { %>
    <!-- 通过externals 加载的外部CDN资源 -->
    <% } %>

******************路由懒加载

当打包构建项目时，javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分隔成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效嘞。

具体步骤： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97

1安装@babel/plugin-syntax-dynamic-import包。

　　　 2在babel.config.js配置文件中声明该插件

3将路由改为按需加载的形式，示例代码如下：

webpackChunkName可以实现分组，同组的组件可以被打包到同一个文件中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')