單頁(yè)應(yīng)用普遍存在一個(gè)問題，首屏加載的數(shù)據(jù)較大，因此時(shí)間上會(huì)稍長(zhǎng)，可以從以下三個(gè)方面著手優(yōu)化。
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之類的開發(fā)輔助插件，可能會(huì)引起無(wú)法檢測(cè)到vue而使用不了，可以在開發(fā)模式時(shí)注釋上
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'f2': 'F2'
}
...}
2、開啟gzip打包
首先需要安裝 compression-webpack-plugin
npm install compression-webpack-plugin --save-dev //大部分人貌似安裝最新版本會(huì)報(bào)錯(cuò)，可以用下面這條指定版本
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
})
)
}
打包后將會(huì)出現(xiàn).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]
此外，還需要服務(wù)器配合配置，如果使用的是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 打包分析
這個(gè)插件可以十分直觀的展示打包生成的各個(gè)包，你可以自己分析出哪部分可以封裝在一起重復(fù)使用的，哪部分屬于多余的，屬于代碼級(jí)的優(yōu)化。
安裝插件
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())
}
打包時(shí)使用
npm run build --report
會(huì)跳出然后在瀏覽器中打開 http://127.0.0.1:8888
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
例如下面這張，很明顯能看出vux已經(jīng)封裝了F2，然而還另外安裝了F2，就知道要怎么優(yōu)化了；
當(dāng)然還有路由懶加載，組件按需引入，其他人已經(jīng)總結(jié)的很好了，大部分應(yīng)該也已經(jīng)做了，這篇適合更加深度的優(yōu)化。
