个人笔记-仅供参考

项目初始化访问优化

问题描述

在浏览器中首次访问项目，加载耗时长，
可能存在以下几点原因：

例：

路由懒加载
模块按需引入
初始化静态文件依赖包太大
请求过多堆积堵塞

一、路由懒加载

在构建应用时，路由懒加载可以把不同路由对应的组件分割成不同的代码块，当路由被访问时，会加载对应组件，页面加载更快速。

1、ES6 import 按需加载

import Vue from 'vue';
import Router from 'vue-router';

// 官网：未指定 webpackCHunkName，每个组件打车一个js文件包
const AView = () => import('@/components/AView');

// 指定相同的 webpackChunkNmae 合并打包成一个js文件
const BView = () => import(/* webpackChunkName: 'BView' */ '@/components/BView');
const CView = () => import(/* webpackChunkName: 'CView' */ '@/components/CView');

export default new Router({
    routes: [
        {path: '/AView', name: 'AView', component: AView},
        {path: '/BView', name: 'BView', component: BView},
        {path: '/CView', name: 'CView', component: CView},
    ]
})

2、Vue 异步组件

export default new Router({
    routes: [
        {
            path: '/DView',
            name: 'DView',
            component: resolve => require(['@/component/DView'], resolve)
        },
    ]
})

3、webpack 提供的 require.ensure()

export default new Router({
    routes: [
        {
            path: '/EView',
            name: 'EView',
            component: resolve => require.ensure(['@/component/EView'], () => {
                resolve(require('@/component/EView'))
            })
        },
    ]
})

二、CND 加速

配置 CDN 加速，访问就近的服务器，提升访问速度

1、在 public/index.html 中添加cdn资源

<!-- 引入Vue -->
<script src="https://cdn.staticfile.org/vue/2.4.3/vue.min.js"></script>
<!-- 引入JQuery -->
<script src="https://cdn.staticfile.org/vue-router/3.0.0/vue-router.min.js"></script>

2、在 vue.config.js 中，配置 externals

module.exports = {
    configureWebpack: {
        externals: {
            'Vue': 'Vue',
            'JQuery': 'JQuery'
        },
    }
}

3、去掉 main.js 中 cdn 引用的相关组件

三、使用 webpack 插件，压缩 chunk-vendors.js 包文件

引用 compression-webpack-plugin 插件，通过nginx的配置，让浏览器解析 .gz 文件，提升加载速度。

1、安装compression-webpack-plugin插件

npm install --save-dev compression-webpack-plugin

yarn add compression-webpack-plugin  --save-dev

2、配置vue.config.js文件

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
  if (process.env.NODE_ENV === 'production') {
    config.plugin('compressionPlugin').use(new CompressionPlugin({
      test: /.(js|css|less)$/, // 匹配文件名
      threshold: 10240, // 对超过10k的数据压缩
      deleteOriginalAssets: false // 不删除源文件
    }))
  }
}

3、nginx 配置文件中添加 相关配置

# compression-webpack-plugin 配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
# 配置禁用 gzip 条件，支持正则，此处表示 ie6 及以下不启用 gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6].";

四、通过webpack-bndle-analyzer插件，分析依赖

可通过 webpack-bundle-analyzer 插件，根据项目结构自行选择优化方式

1、安装webpack-bndle-analyzer插件

npm install --save-dev webpack-bndle-analyzer

yarn add webpack-bndle-analyzer  --save-dev

2、修改配置vue.config.js文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
  configureWebpack: config => {
    return {
      plugins: [
        new BundleAnalyzerPlugin()
      ]
    }
  }
}