单页应用普遍存在一个问题，首屏加载的数据较大，因此时间上会稍长，可以从以下三个方面着手优化。
1、引入在线资源 替代 依赖包
在index.html使用cdn引入部分资源，例：
<body >
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>
</body>
还需要 修改 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 compression-webpack-plugin@1.1.11 --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的内容
当然还有路由懒加载，组件按需引入，其他人已经总结的很好了，大部分应该也已经做了，这篇适合更加深度的优化。
