Vue打包优化

打包优化的前提是，在保证功能可用的前提下，让文件尽可能的变小，同时，让页面显示的速度更快

1.路由懒加载中的 魔法注释 == 实现分类打包

{
  path:'/login',
  component:() => import('@/views/login/index'),
  hidden:true
}

路由懒加载的含义就是，只有当路由进入这个页面时，才会去加载这个页面所对应的资源，在没有设置路由懒加载时，所有页面对应的组件会全部打包到一个js文件中去

2.组件懒加载（路由懒加载中的魔法注释） ---返回值是一个Promise（只有进入组件时才会加载此组件，提高性能，首次加载主页更快）

components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");

3.分析包的大小

使用 npm run preview -- report 打包，之后会生成report.html文件，打开之后就会看到各种文件的大小占比---方块越大，文件越大，对网络带宽和访问速度的要求就会越高

4.去掉所有的console-log

方法一：依赖 babel-plugin-transform-remove-console 第三方插件来完成

（1）安装第三方插件

npm i babel-plugin-transform-remove-console

（2）第三方插件安装完成之后会在项目目录处生成一个babel.config.js文件，配置如下：

// 所有生产环境
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
  plugins: [
    ...prodPlugin
  ],//到这里就可以了
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    },
    'production':{
      'plugins':[prodPlugin]
    }
  }
}

5.排除vue-cli不需要的打包文件

先找到 vue.config.js， 添加 externals 项

//在module.exports之前
let externals = {}
if (process.env.NODE_ENV === 'production') {
  externals = {
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    xlsx: 'XLSX'
  }
}


configureWebpack: {
  // 配置单页应用程序的页面的标题
  // 省略其他....
  externals: externals
}

6.CDN加速

通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度

在public/index.html中的head里配置

<%if(process.env.NODE_ENV==='production'){%>  //此处判断当前环境  process.env--获取环境变量
  //将需要使用CDN加速的js，css文件的静态资源放到此处
  <script src="https://unpkg.com/element-ui/lib/index.js" ></script> //element-ui的静态js文件
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <%}%>

注意：

1.打包时遇到白屏

解决方案：

在vue.config.js中配置publicPath：'./'

{
  publicPath:'./'  //此前，这里一直是相对路径 / ，当遇到白屏时，可能是路径问题导入文件并没有加载进来，所以需要修改为绝对路径 ./ 
}