VUE 用户体验-首屏加载优化

单页应用普遍存在一个问题，首屏加载的数据较大，因此时间上会稍长，可以从以下三个方面着手优化。

1、引入在线资源 替代 依赖包

在index.html使用cdn引入部分资源，例：

还需要 修改 build/webpack.base.conf.js 中的 externals

module.exports = {
...//如果有用到Chrome的插件vue devtools之类的开发辅助插件，可能会引起无法检测到vue而使用不了，可以在开发模式时注释上
externals: {
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'f2': 'F2'
 }
...}

2、开启gzip打包

首先需要安装 compression-webpack-plugin

npm install compression-webpack-plugin --save-dev //大部分人貌似安装最新版本会报错，可以用下面这条指定版本
npm install [email protected] --save-dev

config/index.js 中的 build里添加如下代码

build: { 
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css'],
}

build\webpack.prod.conf.js 中添加如下代码

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

打包后将会出现.gz后缀的文件，既是gzip打包成功

              static/js/112.b84e04f2d68e3025509e.js.gz    2.88 kB                  [emitted]
              static/js/119.925ec3687e78d69cbdbe.js.gz    4.22 kB                  [emitted]
              static/js/124.db49db38c9469c8660de.js.gz    3.72 kB                  [emitted]
static/css/app.632d7392e9acef3b2fb96fa96ba757ea.css.gz    30.8 kB                  [emitted]
              static/js/app.d16196b8a53c0a8478e9.js.gz    57.4 kB                  [emitted]
           static/js/vendor.f2b41dad0dfceba40c6e.js.gz    82.6 kB                  [emitted]

此外，还需要服务器配合配置，如果使用的是nginx，在配置文件中修改gzip 为on 和如下代码，自我感觉gzip大概能减少50%左右的大小

gzip  on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

3、使用 webpack-bundle-analyzer 打包分析

这个插件可以十分直观的展示打包生成的各个包，你可以自己分析出哪部分可以封装在一起重复使用的，哪部分属于多余的，属于代码级的优化。

安装插件
npm install webpack-bundle-analyzer --save-dev

config/index.js 中的 build里添加如下代码

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report,

build\webpack.prod.conf.js 中添加如下代码

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

打包时使用

npm run build --report

会跳出然后在浏览器中打开 http://127.0.0.1:8888

Webpack Bundle Analyzer is started at http://127.0.0.1:8888

例如下面这张，很明显能看出vux已经封装了F2，然而还另外安装了F2，就知道要怎么优化了；

http://127.0.0.1:8888的内容

当然还有路由懒加载，组件按需引入，其他人已经总结的很好了，大部分应该也已经做了，这篇适合更加深度的优化。