VUE 加速首页打开方案最佳实践

使用vue打包，vendor文件过大，或者是app.js文件很大,最终会导致首页打开过慢（图片问题不在此处讨论）

总结一下个人认为最佳的解决方案：

一、分析包体过大原因

可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构,在 package.json 中配置如下命令 npm run analyz，运行即可查看之：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

分析过后可以很明确的了解到什么js特别大，比如vue-toasted压缩后也有20k左右，不是特别需要的话建议可以选一个或者自己写一个小的。

二、库分离

把不常改变的库放到index.html中，通过cdn引入，比如下面这样：

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}

externals 位置： 找到build/webpack.base.conf.js文件，在 module.exports = { } 中添加
库引入在index.html中修改

三、路由懒加载

普通路由加载方式如下：

image

懒加载的方式如下：

image

这样打开首页时候其他路由页面不会加载，页面较多时可以减少一次性加载

四、压缩

使用UglifyJSPlugin压缩
通过UglifyJSPlugin可以压缩我们的*.js文件。
安装方法: npm install uglifyjs-webpack-plugin --save-dev。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  plugins: [
     new UglifyJSPlugin({
            parallel: 4,
            uglifyOptions: {
                output: {
                    comments: false,
                    beautify: false,
                },
                compress: {
                    warnings: false
                },
            },
            cache: true,
        }),
  ]
}

开启gzip压缩

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
     asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
     algorithm: 'gzip',//算法
     test: new RegExp(
          '\\.(js|css)$'    //压缩 js 与 css
     ),
     threshold: 10240,//只处理比这个值大的资源。按字节计算
     minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
})
]

这个如果nginx做了gzip配置就不需要写了