vue打包优化-首屏加载速度优化

参考：Vue Cli 项目打包体积过大，优化vue项目体积 - 木不识丁 - 博客园 (cnblogs.com)

系统的首屏加载时长，直接决定了用户的使用体验，也是一个前端团队开发的实力的体现。

影响首屏加载时长的因素有：物理距离导致的网络时延，文件的大小；

网络时延，可以通过CDN加速解决，主要将体积较大的文件，如ant-design-vue，，zrender，放在CDN上，减少物理距离引入的网络时延；

文件体积的大小，才是优化的关键，也是我们可以大做文章的地方。

接下来说说，减小文件大小的几种思路：

1. 编译时webpack去除无用代码（webpack自带，不需要额外进行）
2. 编译时webpack对文件压缩（本项目测试基本无作用）
3. 服务端压缩文件 Gzip（效果明显，从36M压缩到8M）
4. 只编译有改动的代码，采用contenthash，避免浏览器重新加载不变的内容
5. 按需加载，首屏只加载登录页面；也可以考虑组件动态加载
6. webpack dllplugin

1. 去除无用代码

webpack插件，uglifyjs-webpack-plugin，webpack4.0已经内置，不需要再引入。没有优化空间了

2. 文件压缩

js，css，图片压缩，是webpack打包时，将文件先压缩一次。

js压缩：UglifyJsPlugin
css压缩：url-loader
图片压缩：image-webpack-loader

// vue.config.js   js压缩
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    configureWebpack: {
        plugins: [
            new UglifyJSPlugin({
                uglifyOptions: {
                    //生产环境自动删除console
                    compress: {
                        drop_debugger: true,
                        drop_console: true,
                        pure_funcs: ['console.log']
                    }
                },
                sourceMap: false,
                parallel: true

            })
        ]
    }
}

UglifyJsPlugin压缩js文件后，几乎没有任何变化

// vue.config.js 图片压缩
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                bypassOnDebug: true
            })
            .end()
    }
}

module.exports = {
    chainWebpack: (config) => {
        
        config.module.rule('images')
              .test(/\.(png|jpe?g|JPG|gif|svg)(\?.*)?$/)
              .use('url-loader')
              .loader('url-loader')
    }
}

4. 服务器文件压缩

是服务器端的功能，需要前端服务器支持。对于apache来说，在配置文件httpd.conf中，去掉如下两行代码前的#：

#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so

在该文件的最后面，增加如下代码：

# 告诉 apache 对传输到浏览器的内容进行压缩
SetOutputFilter DEFLATE
# 压缩等级 9
DeflateCompressionLevel 9
#设置不对后缀gif，jpg，jpeg，png的图片文件进行压缩
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

实测，服务器端采用GZIP压缩后，浏览器加载文件从36M降到了8M。可见效果还是很明显的。

5. 只编译有改动的代码

只编译有改动的代码，不编译第三方包或者没有任何改动的文件，主要目的是借助浏览器的缓存，在首屏加载时，不重复加载没有变化的文件，减少加载文件的个数，提高首屏加载速度。