Vue项目打包优化（提升项目打开速度）

1. 可以把博客主题的相关资源放到了又拍云上，很大程度上减轻了服务器的流量压力来提升打开速度。
2. 使用nginx自动解压缩来提升网站打开速度

Vue项目在开发环境中编写完毕，编译看看启动速度。

使用cmd输入vue ui打开ui界面，编译如图。

发现需要9s，非常需要对其优化，记录一下优化过程，以后可以及时查阅。

1、productionSourceMap:false

修改vue.config.js中的配置

module.exports = {
   
  outputDir: `${
     srcFile}`, // 在npm run build时 生成文件的目录 type:string, default:'dist'
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
}

如果不加false，则在打包的过程中会出现map文件，该文件的主要主要作用是让我们打包后的文件像未加密的代码一样，可以准确的输出相关的错误信息。默认情况下productionSourceMap为true，在此情况下，项目打包过后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知代码具体哪里出错。

productionSourceMap: true（默认）	productionSourceMap: false

结果：

2、路由懒加载

官方文档

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk (opens new window)，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

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

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

3、关闭Prefetch

官方文档

因为vuecli 3默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了。

**注意：**prefetch其实并不会影响首页的加载速度，只是优化子页面

使用场景：当对流量有限制时可以使用，比如移动端，只用查看首页或者其它并不是全部页面的时候，使用perfetch可能会导致流量的不必要损耗。

所以我们要关闭这个功能，在vue.config.js中设置

// vue.config.js
module.exports = {
   
  chainWebpack: config => {
   
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')

    // 或者
    // 修改它的选项：
    config.plugin('prefetch').tap(options => {
   
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    })
  }
}

4、element-ui组件按需加载

打包过程中可以看到element-ui占用了881.3kB，所以需要对其进行按需引入。

具体参考
易错点：项目是基于vue-cli 3.x的版本，并没有官网的.babelrc文件，只有babel.config.js文件，而且项目不需要引入完整的element-ui，只需要引入部分，按官网的步骤安装babel-plugin-component后在babel.config.js写入内容，报错

解决方法：
.babelrc文件和babel.config.js文件都是配置文件，可以视为相同，之后需要使用npm安装

npm i @babel/preset-env -D
而且，也不再使用es2015，改成@babel/preset-env，两者是相同的，其作用都是编译es6语法，因此在babel.config.js中写成

module.exports = {
   
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env",