vue项目优化

首屏加载速度变快
1、 生成打包报告
2、 第三方库启用CDN
3、Element-UI组件按需加载
4、路由懒加载
5、首页内容定制

第三方库启用CDN

通过externals加载外部CDN资源，减少打包体积
步骤一：在vue.config.js中

module.exports ={
  chainWebpack: config => {
    // 发布模式
    config.when(progress.env.NODE_ENV == 'production', config => {
      config
        .entry('app')
        .clear()
      config.set('externals', {
         vue: 'Vue',
          'vue-router': 'VueRouter',
          axios:'axios',
          echarts: 'echarts',
          nprogress: 'NProgress'
      })
      
    }
  }
}

步骤二：在index.html中
引入css文件 和 js文件

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

步骤三：删除在main.js中的引用

Element-UI组件按需加载

注意：element-ui 无需配置再externals，只需要再index.html中引入样式和js即可使用

首页定制

不同打包环境下，首页内容可能有所不同，通过插件方式进行定制
在vue.config.js中

module.exports ={
  chainWebpack: config => {
    // 发布模式
    config.when(progress.env.NODE_ENV == 'production', config => {
      config.plugin('html').tap(args => {
          args[0].isProd = true
          return args
      })
    }

    config.when(progress.env.NODE_ENV == 'production', config => {
       config.plugin('html').tap(args => {
          args[0].isProd = false
          return args
      })
    })
  }
}

在pulbic/index.html中， 根据isProd的值进行渲染
按需渲染页面的标题

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>后台管理系统</title>

按需加载外部的CDN资源

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

路由懒加载

当打包构建项目时，JavaScript包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，就更加高效。
实现一：路由懒加载写法：

component：resolve=>(require(['需要加载的路由的地址'])，resolve)

实现二：把组件按组分块
具体需要3步：
1、安装@babel/plugin-syntax-dynamic-import包
2、再babel.config.js配置文件中声明该插件
3、将路由改为按需加载的形式
具体操作：
1、安装

npm install --save-dev @babel/plugin-syntax-dynamic-import

2、再babel.config.js配置
在babel.config.js文件中plugins后面添加配置项@babel/plugin-syntax-dynamic-import

image.png

3、将路由改为按需加载的形式

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

group-foo: 分组名，自己定义
./Foo.vue： 组件的路径
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。