[Vue]首屏加载优化

1.优化前先分析依赖

// 首先安装依赖
npm install webpack-bundle-analyzer --save-dev

// 然后在vue.config.js中进行引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 然后添加如下代码
configureWebpack: {
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerHost: '127.0.0.1',
            analyzerPort: 8888,
            reportFilename: 'report.html',
            defaultSizes: 'parsed',
            openAnalyzer: true,
            generateStatsFile: false,
            statsFilename: 'stats.json',
            statsOptions: null,
            logLevel: 'info'
        }),
    ]
}

当打包或者运行时，会在本地8888端口展示依赖情况，然后自行分析。

---

2.采用路由懒加载

在写路由时，不要将所有的组件都一下加载全，应该使用import()进行懒加载。

这样只有当访问这个路由时，才会加载对应的模块。

cosnt routes = [
    {
        path: "/home",
        component: ()=>import('@/view/Home') //使用import进行懒加载
    }
];

---

3.进行GZIP压缩

需要在Webpack中构建gz文件，然后在Nginx中启用gzip。

// 首先安装依赖
npm install compression-webpack-plugin@1.1.12

// 然后在vue.config.js中进行引入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 然后添加以下代码
configureWebpack: {
    plugins: [
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.json$|\.css/,
            threshold: 10240, // 只有大小大于该值的资源会被处理
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        })
    ]
}

然后在Nginx中进行以下配置，启用GZIP。

# 开启gzip。
gzip on;
# 开启后如果能找到 .gz 文件，直接返回该文件，不会启用服务端压缩。
gzip_static on;
# 文件大于指定 size 才压缩，以 kb 为单位。
gzip_min_length 1;
# 用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了持前期版本加了此选项,目前此项基本可以忽略
gzip_http_version 1.1;
# 压缩级别，1-9，值越大压缩比越大，但更加占用 CPU，且压缩效率越来越低。
gzip_comp_level 9;
# 压缩的文件类型。
gzip_types text/css application/javascript application/json;

---

使用CDN引入资源

在打包时，会将import导入的东西，打包成js文件，然后该文件就会很大.如果我们的服务器带宽很小，那么还要加载这些资源就很慢，这样的话我们可以使用cdn的方式，去让用户请求其他服务器获取资源。

我们需要在index.html中进行使用link或者script标签的方式去引入对应的资源。

然后在vue.config.js中进行配置。

// Key：和package中的名称一样，value：全局变量名
// 一定要将Vue引入[通过cdn，也要在这里进行配置]，因为有些文件依赖着它。
configureWebpack: {
    externals: {
        'vue': "Vue",
        'element-ui': "ELEMENT",
        'axios': 'axios',
        'jquery': '$',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex'
    }
}