【Vue】页面首次载入优化

优化前的大小

1.图片优化

之前为了方便开法， 背景图片直接在 assets 里面扔了一个 jpg ， 导致加载这张图片的时候就用了十几秒， 于是乎我就把图片上传空间了， 然后改用网络地址。

2.禁止生成.map文件

build 出来的 dist 文件夹里面有很多的 .map 文件,这些文件主要是帮助线上调试代码，禁止生成这些文件.

在 vue.config.js 里面加上这句。

3.路由懒加载

4.cdn引入公共库

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>

    //cdn引入
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios'
        }
    }

网上说可以把 import 注释掉，亲自操作会报错，也有资料说不用注释也不会打包。

一顿操作最后的文件,效果显著，app.js还是很大

5.终极法宝 GZIP压缩

做完这个感觉前四步都是小菜一碟，直接把 1.4m 的 app.js 干成一百多 kb ,其他的都不足挂齿了。

 configureWebpack: config => {
        return {
            //配置cdn
            externals: {
                'vue': 'Vue',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios'
            },
            //配置gzip压缩
            plugins: [
                new CompressionWebpackPlugin({

                    test: new RegExp('\.(js|css)$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            ],
        }
    }

服务端也要配，不然不认识 GZIP 文件。

//配置GZIP压缩模块
const compression = require('compression');
//在所有中间件之前引入
app.use(compression());

最垃圾的服务器通过以上几个优化,一样飞起来了!!!

对比一下,结果显而易见!!!