导致加载慢的原因：

• 网络延时问题
• 资源文件体积是否过大
• 资源是否重复发送请求去加载了
• 加载脚本的时候，渲染内容堵塞了

解决方案：

• 减小入口文件积（路由懒加载）
• UI框架按需加载
• 图片资源的压缩
• 组件避免重复打包
• 开启GZip压缩（配置本地config，和服务器的nginx）

一、安装webpack-bundle-analyzer打包文件分析工具

webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取打包后各个插件和文件的大小，并可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况等，对应做出优化，从而帮助提升代码质量和网站性能。

安装：

npm install webpack-bundle-analyzer --save-dev

webpack.config.js中配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

package.json的scripts中配置：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

 运行查看报告：

npm run analyz

 把无用的插件进行删除，对引用多次的文件进行优化等等

二、优化处理

1）代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

（3）基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

1、路由懒加载（必须的）

️vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

// 安装插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import

// 修改babel.config.js
module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      },
      "syntax-dynamic-import"
    ]
  ]
}

// 修改路由组件的加载（router/index.js）
{
  path: '/',
  name: 'home',
  component: resolve => require(['pages/Home'], resolve)
}

2、组件按需加载

3、图片资源压缩

4、对引用多次的文件进行处理，对大的文件进行分隔

webpack3 使用 CommonsChunkPlugin，在webpack的config文件中，配置minChunks，

假如minChunks为3。表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件。

webpack4中使用splitChunkPlugin处理组件避免重复打包问题，和打包后的js文件过大问题。（CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化）

具体介绍及配置，请参考我的另一篇博客：

webpack的优化之SplitChunksPlugin_姜无忧的博客-CSDN博客最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。从 webpack v4 开始，移除了CommonsChunkPlugin，取而代之的是optimization.splitChunks。optimization.splitChunks下面这个配置对象代表SplitChunksPlugin的默认行为。webpack.config.jsmod...https://blog.csdn.net/xiasohuai/article/details/123297284

 5、启用CDN加速

我们可以把那些不太可能改动的代码或者库分离出来，继续减小单个chunk-vendors，然后通过CDN加载进行加速加载资源。

// 修改vue.config.js 分离不常用代码库
module.exports = {
  configureWebpack: config => {
    if (isProduction) {
      config.externals = {
        vue: 'Vue',
       'vue-router': 'VueRouter',
        vuex: 'Vuex',
        axios: 'axios'
      }
    }
  }
}

// 在public文件夹的index.html 加载
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>

6、修改uglifyOptions去除console来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev

// 修改vue.config.js
  configureWebpack: config => {
    if (isProduction) {
      .....
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })       
      )
    }
  }

7、nginx开启gzip（这个会大大提升速度！！！）

1.在nginx中开启gzip

server {
    gzip on;
    gzip_buffers 32 4K;
    gzip_comp_level 6;
    gzip_min_length 100;
    gzip_types application/javascript text/css text/xml application/json;
    gzip_vary on;

    listen       80;
    listen       [::]:80 ;
    。。。。。。。。

请求js/css文件 

 未配置的样子：

配置后的样子：

8、nginx开启浏览器缓存